JavaScript用ゲームエンジンenchant.jsを試す。インストール方法と簡単なプログラム例

2019/01/13

ゲーム開発フレームワークenchant.jsを試してみました。ゲームエンジンについてはUnityとかPython向けとか色々検討しましたが開発環境やら特定の環境下でしか使えず、一方でenchant.jsはブラウザ上で動く（＝プラットフォームを選ばない）ことに着目した次第です。スマホ向けにも作れるそうなので。

今回は導入方法と簡単なプログラム例について書きます。

[ad#top-1]

1 enchant.jsのインストール
2 完成例
3 ソースコード

enchant.jsのインストール

enchant.jsは以下のサイトからダウンロードできます。

http://enchantjs.com/ja/

ロゴの下の「Download」ボタンを押すとダウンロードページに飛びます。

「Download latest version of enchant.js」ボタンを押してダウンロードしてください。zipファイルがダウンロードされるのでダウンロード後に解凍しましょう。

解凍後のフォルダ内です。このフォルダ内すべてのファイルを使用するわけではないので必要なファイルのみをコピーします。とりあえずは「enchant.js」または「enchant.min.js」があればOKです。

あとは今回サンプルの中からくまの画像（chara1.png）を使いたいのでコピーしておきます。「example」−「biginner」フォルダから探しましょう。

任意のフォルダに、先程コピーしたenchant.jsとchara1.pngの他に、index.htmlとmain.jsを用意しておきましょう。この２つのファイルの中身は後述します。

↓任意のフォルダの中身

完成例

今回の完成形はこんな感じです。→キーで右に移動し、←キーで左に移動するようになっています。移動方向に向きも変わります。今回こんなものを作ります。

ソースコード

まずはindex.htmlです。HTMLは至って簡単で、enchant.jsをまず読み込んで、その次に自分で実装するmain.jsを読み込むだけです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>

次にmain.jsです。それぞれにコメントで意味を欠いておいたので参考にしてください。

enchant(); //先頭にかならずこの行を加える

window.onload = function() {
  var core = new Core(320, 320); //Coreオブジェクト生成
  core.preload('chara1.png');    //画像読み込み
  core.onload = function() {
    var sprite = new Sprite(32, 32);  //キャラクタのサイズ
    sprite.image = core.assets['chara1.png']; //画像の中から32x32pxで抜き取ってセット
    sprite.x = 50;  //初期位置(X)
    sprite.y = 50;  //初期位置(Y)
    sprite.frame = 1;  //キャラのフレーム指定
    //キャラのイベント
    sprite.addEventListener('enterframe', function(){
      if(core.input.left){  //←キー押下
        this.x-=5; //左に5px移動
        this.scaleX = -1;  //向きを反転
        this.frame = this.age % 3;  //キャラを歩くように見せるようフレームを変える
      }
      if(core.input.right){ //→キー押下
        this.x+=5; //右に5px移動
        this.scaleX = 1;  //向きを正向き
        this.frame = this.age % 3; //キャラを歩くように見せるようフレームを変える
      }
    });
    core.rootScene.addChild(sprite);  //キャラをシーンに追加
  };
  core.start(); //ゲームスタート
};

[ad#ad-1]

- HTML/JavaScript