コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

Sayonara Do it.

ちょっと雑談でも

僕は全く利用していなかったんだけどここのサイトが終了したそうですね。
jsdo.it - Share JavaScript, HTML5 and CSS
これが何かといいますとHTML/CSS/JS試せるやつです。

そうか、また一つの時代が終わってしまったのですね……。そんなわけで、きっと難民が発生しているのではないかと思ったんです(ない)。Runstantという国産のプレイグラウンドサービスがあるんですけどいかがかな?
runstant.com


おわり




という雑宣伝はどうでもよくて、Phina.jsで周りの操作方法を突然知りたくなったのでこんな記事を書いてしまったのです。僕は鳥頭なのでこうやってメモに残さないと忘れてしまうのです。



なんか作った。

んで、ちょっと画像周りと音声周りの操作方法を知りたくなったのでお試しで作ってみました。

こんな感じで表示できるっぽいです。

/* 略 */
// アセット
const ASSETS = {
  // 画像
  image: {
    'myImage': 'XXX.png',
  },
  sound: {
    'mySound': 'XXX.mp3',
  },
};

/* メインシーン */
phina.define("MainScene", {
  superClass: 'DisplayScene',

  init: function(options) {
    this.superInit(options);
     // スプライト表示(画像表示)
    this.player = Sprite('myImage', 64, 64).addChildTo(this);
    this.player.setPosition(400, 400);
    this.player.frameIndex = 0;

    // サウンド再生
    // ※ Webブラウザ上ではそのまま再生することができないのでタッチイベントにする
    const label = Label('再生').addChildTo(this);
    label.x = 320;
    label.y = 480;
    label.setInteractive(true);
    label.onpointstart = function() {
      SoundManager.play("sound");
    };
  }

  // 以下略

});
/* 略 */

画像と音声再生できるようになったので、これで何かしらのゲーム的なものつくれるようになったと思う。あとはどんなゲーム作るのかと素材の調達だけですね(一番面倒くさいやつ……)。関係ないけどframeIndexってあふれても0に戻るっぽくてスプライトで分けた数の上限オーバーしても大丈夫っぽいね。さて、なに作ろうか……。


あ、アセットはこちらからお借りしました。
phina.js CDN by jsDelivr - A CDN for npm and GitHub
このアセットでなんかつくれないかね……。フラッピーバードの素材はなぜかあるんですよね……。


おわり