これまでenchant.jsを使っていましたがphina.jsも覚えたくなりました。
勉強の覚え書きとして、同じ処理を各ライブラリを使って記述したときのコードを記録しておきたいと思います。
キャラクターを表示して動かす
今回は本当にシンプルな、テンプレート用のプログラムです。
次の３つについて記述位置と記述方法が最低限分かるシンプルなものとしました。
1.初期設定
2.画像表示
3.定期的な処理
またHTMLファイルについては、どちらもscriptタグでライブラリファイルをリンクするのみなので割愛します。
enchant.js
// ライブラリの初期化
enchant();
window.onload = function(){
var game = new Core(320, 320); // 画面サイズ
game.fps = 15; // fps
game.preload('chara1.png'); // 画像素材
game.onload = function(){
// キャラクター表示
var kuma = new Sprite(32,32);
kuma.image = game.assets['chara1.png'];
kuma.moveTo(280,280);
game.rootScene.addChild(kuma);
// 定期処理
kuma.addEventListener('enterframe',function(){
kuma.x--; // 左へ移動
});
};
game.start(); // 処理開始
};
phina.js
// ライブラリの初期化
phina.globalize();
phina.define('MainScene', {
superClass: 'DisplayScene',
init: function() {
this.superInit();
// キャラクター表示
this.player = Sprite('tomapiko', 64, 64).addChildTo(this);
this.player.setPosition(400, 400);
this.player.frameIndex = 0;
},
// 定期処理
update: function(app) {
this.player.x -=1; // 左へ移動
}
});
phina.main(function() {
var app = GameApp({
startLabel: 'main',
width: 465, // 画面幅
height: 465,// 画面高さ
fps:60, // fps
assets: { // 画像素材
image: {
tomapiko: 'http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/assets/images/tomapiko_ss.png',
}
}// アセット読み込み
});
app.run(); // 処理開始
});
感想
今回は本当にベースの部分だけですが、どちらもほんの数十行で完了してしまうので、覚えやすいという印象です。細かなところは好みで別れるのかもしれません。
初めて触ってみたphina.jsは、コンストラクタ含めクラスの記述が分かりやすいと思いました。
なお、開発環境はenchant.jsはcode9leap、phina.jsはRunstantです。