phina.jsでbase64形式で画像を使う

使える。

phina.define('MainScene', {
  superClass: 'DisplayScene',
  init: function() {
    this.superInit(); 
    const player = Sprite('player').addChildTo(this);
    player.x = this.gridX.center();
    player.y = this.gridY.center();
  }
});


const ASSETS = {image: {
  player : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAA1pJREFUaEPtlSGoFFEUhl9+ebFr0GJ4YFBQLCIbBcEoD9Ri0WLWIIJFRDFZXnpVBZuI3WAQkyAGwWQQbKZxv4v/8O+ZM/fNzKogzIGPe++595z/v7Ozu1tzzDHHHHPMMUfTNJNYLBZNJJ4ZQprsw8XuXLnUwfdjbR9pMlITdV4+vldgPtREmnRo9P7Vi7ZxhoQ552eHmEiTggZ9zZX3Pd+H3XMnDzSRJsHF1dAbQ8w7OjPJAEUUZ+Kw3Dla0Dozwz55xpqJNKnbq5kLFGO7O62A5yXIWvswyoBu743VVI2/PdoteF5iymnOONqAmgJNuLE3dQPkdI65C/vYZ6KTcAMqRszNsH6wPFwgx96nVatn29sdYc1HG1CRBN2MgyjiUVjjZAMUMpeQGzh75FALa4lgxEV9PsqAipkz8qj15iOox//m85cyknNxx41kJtYWQsKMLkKOcf/dh5L7+P1H2dce/Hz9tKD1RgYkwqOmKUKMevwE+zKgMzonYTHYAHDYDTRf35amjJkBzrKvl1YGdJlJBiiSaB/sg27eZyATh05CTDWgNbWTDegwo5pGYfLRALenJopqzEiTQs3cBPM+cd6DIaJOmhTejOYyEoX1ufP1vLW33z4F9amRJjPUFCMOwkBg4Myp4y1DTKTJCI3UFBFCwlpL/Pq1i4W/YoDGesyE5lH8ycPbg02kScfF1bh8zveXZQTf01zrP24AuPGx51fbJ+CC/qS0XzORJh2K400JDBCZAYQ9WPeZ6CQciesmbkDBnouDQnUw2QBNQM0R8sgMkFOofpIBoJAfmpoBcm6AGn1N9fO8irR/mnTUTOI1AzJBjf9aTjbgN5EBRg8MuDk3waj9PhOdhCMD+gjcAI01ai8zIEYboMD/cNRQ34oT50+XEcixJwNF7Pe/pddHDegkRGzCGlFx4eblzrh221Wt6icbcPcSubF3tzpyTgYQ9wtEDegkHIqEmg8dvRZib5EmM2jCTfypRIbcOJImMw4SKGv73P+5AZ0ZayJNRmikN7x9yzc456TJCI30lws1A0POOWkyQqOhNxtzFtJk5L81wHwjA9aghH77a039vKJ2Pk0CRYgpJF4zoJqsrq+mkxAU+BsNa/92PTXsZ3WTDNSI5yE758TzTdNs/QIWqxL7Ezfl1gAAAABJRU5ErkJggg==',
}}

// Main
phina.main(function() {
  const app = GameApp({
    startLabel: 'main',
    assets: ASSETS,
  });
  app.run();
});

変換は
Base64エンコーダー (画像を簡単に変換)

ただし、普通は使う必要はなくて、runstantがファイルアップロードできないから。

全画像をbase64化するのも別の場所確保も辛いので…どうするべきか。
jsdo.itはファイルアップロードできるのでそっちの方が良いか。

前回

phina.jsでグリッドに四角形を敷き詰める - Qiita