4

HTML5ゲームを開発しています。サーバー側のコード（node.js、socket.io）はほとんど完了しており、クライアント側のコードを磨くことに移っています。

キャンバスにタイル/グリッドを直接描画し、コンテキストやclearRectなどを使用してプレーヤーのスプライトを移動しています。タイルマップ/グリッド上に次のような単純なアニメーションや効果を描画することを考えています。

  • 雨、稲妻の閃光、雷のオーディオクリップ。

  • いくつかのタイルをアニメーション化します。たとえば、草のタイルには、フレームを循環することによって風に吹かれる草があります（アニメーションGIFのように）。

  • マウスクリックまたはキーボードボタンを押すと閉じることができるテキストボックスをポップアップ表示します。

私はこのJavaScriptエンジンの長いリストをチェックして、CraftyJSとMelonJSを試しましたが、これらのほとんどはプラットフォームまたはアーケードスタイルのゲーム用に作成されており、それらの多くは本番環境に対応していないか、メンテナンスが不十分です。

私が望むことを達成できる、シンプルで軽量な、プロダクション品質のHTML5キャンバスエンジンはありますか？

4

3 に答える 3

2

CreateJSを見てください。それはあなたが探しているもののための素晴らしいエンジンです.

よく整備されていますが、1.0 バージョンは (まだ) リリースされていません。

于 2013-02-22T15:25:02.770 に答える
1

cgSceneGraphがその作業を行います。サンプルの Web ページを見てください。アニメーション化されたスプライトの例がいくつかあります。これはフレームワークのネイティブ コンポーネントであり、アニメーション化されたスプライトの同じインスタンス内でのマルチ アニメーション、スプライト シートの使用など、いくつかの機能で非常に使いやすくなっています。

于 2013-02-22T16:28:17.810 に答える
1

あなたが達成したいのはアニメーション化されたスプライトだけですか？これは、ゲーム エンジンを使用せずに簡単に行うことができます。ダイアログ ボックスについては、キャンバス上で dom 要素を使用できます。

これは私がJavaScriptで書いたスプライトクラスです - 多分それはいくつかの助けになるでしょう:)

var FrtlsSprite = Class.extend({
init: function(bitmap, offsetX, offsetY, frameWidth, frameHeight, frameCount, loop){
    this.dtotal=0;
    this.framerate=0.007;
    this.loop = loop;
    this.isPlaying=false;

    this.bitmap = new Image();
    this.bitmap.src = bitmap;
    this.frames= new Array();
    this.currentFrame=0;
    this.endFrame=0;

    for(var i=0;i<frameCount;i++){
        this.frames.push(new FrtlsFrame(offsetX+i*frameWidth, offsetY+0, frameWidth, frameHeight));
    }
},
update: function(dt){
    if(this.isPlaying){
        this.dtotal += dt   //we add the time passed since the last update, probably a very small number like 0.01
        if (this.dtotal >= this.framerate){
            this.dtotal -= this.framerate; 
            this.currentFrame++;
            if(this.currentFrame==this.endFrame){
                if(this.loop == false){
                    this.stop();
                }
                else{
                    this.currentFrame=0;
                }
            }
        }
    }
},
draw: function(){
    fruitless.ctx.drawImage(this.bitmap, 
                            this.frames[this.currentFrame].pos.x, 
                            this.frames[this.currentFrame].pos.y, 
                            this.frames[this.currentFrame].dimensions.x, 
                            this.frames[this.currentFrame].dimensions.y, 
                            0, 
                            0, 
                            this.frames[this.currentFrame].dimensions.x*fruitless.worldScale, 
                            this.frames[this.currentFrame].dimensions.y*fruitless.worldScale);
},
play:function(frame){
    this.currentFrame=(frame==undefined)?0:frame;
    this.endFrame = this.frames.length-1
    this.isPlaying=true;
},
playTo:function(frame, endFrame){
    this.currentFrame=frame;
    this.endFrame = endFrame;
    this.isPlaying=true;
},

stop:function(frame){
    this.currentFrame=(frame==undefined)?this.currentFrame:frame;
    this.isPlaying=false;
}

});

于 2013-02-22T15:34:08.060 に答える