こんにちは！

toiroフリーランス編集部です。

enchant.js（エンチャント・ジェイエス）というのはゲーム開発フレームワークです。

HTML5とJavaScriptがもとになっており、ブラウザで動くゲームを比較的簡単に作成することができます。

ゲームの開発に興味はあるもののやったことがない入門者に向けて、enchant.jsでのゲーム開発の簡単な流れを解説しましょう。


開発環境を整える

『enchant.js』を入手

開発をするためには環境を構築しなければなりません。

まず必要となるのはenchant.jsライブラリの本体となるのですが、これはWeb上に無償で公開されています。

公式サイトからダウンロードしましょう。

本体自体は1MBにも満たない非常に軽いファイルなので、PC 本体の空き容量もそこまで心配しなくても大丈夫です。

公式サイト:https://github.com/wise9/enchant.js/


テキストエディタをダウンロードする

続いて、用意するのはテキストエディタ。

これからenchant.jsを使用してJavaScriptのプログラミングをしていくことになります。

その際に実際にコードを入力するためのツールとして欠かすことが出来ません。

原稿などの執筆を目的としているWordなどとは違い、プログラミング用のコードを書くことを目的としていますので非常に便利なのです。

様々なテキストエディタが存在していますが、近年プログラマの間でシェアが高まっている『Visual Studio Code』をおすすめします。


必要となるファイルを作成する

enchant.jsとテキストエディタのダウンロードが出来たら、続いて開発を始めるためのファイルの準備をしましょう。

基本となるのはhtmlファイルとjsファイルです。

htmlファイルはこれから作成するゲームを表示させるために必要となるものとなります。

jsファイルはゲーム開発のメインとなるものです。

開発に使用するファイルはフォルダにまとめておくと便利になります。

何かわかりやすい名前をつけたフォルダ内に、enchant.js、html、jsの3ファイルをまとめておきましょう。


htmlファイルを作成

htmlファイルは、実際にゲームを表示させるために必要となるファイルです。

インターネットで様々なサイトがありますが、ブラウザで文字や画像、動画などが表示されているのはこのhtmlファイルによるもの。

今回のenchant.jsで開発するゲームも同様に、表示させるものがなくてはゲームで遊ぶことが出来ません。

テキストエディタで新規ファイル作成をしたら、以下のコードを書きましょう。

  1. <script type=”text/javascript” src=”enchant.js”></script>
  2. <script type=”text/javascript” src=”main.js”></script>


これでhtmlファイルにenchant.jsファイルとjsファイルが読み込まれるようになりました。

この状態でファイル名はindex.htmlとして一度保存をしましょう。


jsファイルを作成

今度はjsファイルの作成です。

また新たにテキストエディタで新規ファイル作成をし、以下のコードを書きます。

  1. enchant();


これによってenchant.jsファイルが読み込まれるようになります。

ファイル名をmain.jsとして保存すれば完了です。ここで念の為、ちゃんと読み込み処理がされているか確認をしましょう。

次に、作成したmain.jsファイル内に以下のコードを書きます。

  1. window.onload = function() {
  2. console.log(‘hello world’);
  3. };


これはコンソールと呼ばれるところに対して、hello worldという文字を表示させるためのコードです。

コードの意味についてはこの後ご説明しますので、今の時点ではそういうものだと思ってそのまま書いてみてください。

保存をしたら、先ほど作成したindex.htmlファイルをブラウザで開き、開発者向けツール画面を開きます。

問題なく読み込まれていれば、hello worldという文字が表示されているはずです。これで必要なファイルの作成は完了です。


基本となるコードの意味を知る

enchant.jsでゲーム開発をする上で、基本となるコードがあります。

まずはこれを知らないことにはゲーム開発は出来ませんので、しっかりとここで学びましょう。


enchant ();

先ほど簡単に説明しましたが、このコードでenchant.jsを読み込むことが出来ます。

enchantが関数と呼ばれる部分に当たるのですが、後ろに()を付けることによって実行されるのです。

これを「関数を呼び出す」といいます。

enchant.jsに限らず、多くのプログラミング言語は上から下に向かってコードが読み込まれていくのです。

そのためenchant.jsの下準備が整うこのコードを一番はじめに書かなければなりません。


onload

  1. window.onload = function() {};


このコードはWindowに対するonloadというイベントを表しています。

通常だと書かれているコードが読み込まれると同時に処理される筈です。

ゲームのように全体像をすべて読み込んだ上で処理しなければならないものの場合、それだとエラーになってしまいます。

そこでこのonloadイベントを使うことによって、まず全体的に読み込みした上で処理されるようになるのです。

functionの部分には実際の動作に関する細かい指示を書き込むことになります。

これは関数を定義するためのJavaScriptにおける書き方です。

  • var ゲームオブジェクト変数名 = new ゲームオブジェクト変数名(横幅,高さ);

例

  1. var game = new Game(320, 320);


varを使うと変数を宣言することが出来ます。変数はいわゆる箱のようなものだと考えてください。

varとイコールで挟まれた変数名の部分にはご自身が決めた名称を入れます。

例えばvar Gameとした場合、Gameという名前の変数を作っているというわけです。今回はgameという変数名にします。

そして、イコールに続いてnewでゲームオブジェクトを宣言すると同時にゲームの横幅と高さを指定しましょう。

今後はゲームの仕組みなどを作っていく際に、ここで指定した変数を使っていくことになります。


キャラクターを表示させるための画像を準備

ゲームにキャラクターを登場させる

ゲームオブジェクトを宣言しましたので、今度はゲームそのものの仕組みを作っていきましょう。

まずはキャラクターの表示です。

画像を呼び出してキャラクターとする場合には、先ほど作成したゲームオブジェクト変数に対してpreloadで画像を指定します。

今回は犬の画像を指定するとして変数をdogとしましょう。


画像を呼び出すための準備

  • 変数名.preload(‘画像名’);

例

  1. game.preload(‘dog01.png’);


変数名の部分はゲームオブジェクトの変数名が入り、画像名のところには今回呼び出したい画像を拡張子まで含めて書きます。

複数の画像を読み込む場合には、画像名をカンマ区切りでどんどん書いていけば大丈夫です。

これで画像を呼び出す準備ができました。続いてゲームオブジェクトをonloadイベントで読み込むようにしましょう。

そして最後にスタートイベントを書くことによって、ゲームがスタートするようになるのです。

  • 変数名.onload = function() {}
  • 変数名.start();

例

  1. game.onload = function() {}
  2. game.onload = function() {}


ゲーム上に画像をキャラクターとして表示する

キャラクターの位置を指定する

先ほど準備した画像を変数に代入して、表示させる位置を座標で指定しましょう。

先ほど書いた変数名.onload内のfunctionに対して書くのですが、画像を変数に代入するためにSpriteというオブジェクトを使用します。

newで作成するのですが、このとき画像の横幅と高さも指定してください。

表示させる画像のサイズにそぐわないサイズで指定してしまうと見た目が悪くなってしまうので、あらかじめ確認しておくと良いでしょう。


画像を指定する

続いてキャラクター変数に対して画像を指定します。

さきほどpreloadした画像はassetsプロパティ内にまとまっているので、画像名で指定することで読み込まれるようになります。

そして表示させる位置を決めるために、xとyそれぞれの座標を指定してください。

さらにenchant.jsには、画面を切り替えるためにシーンという概念が存在しています。

まずはrootSceneという基本となるシーンにaddChildメソッドを使用し、画像がデフォルト表示されるようにしましょう。

  1. var　キャラクター変数名 = new Sprite(画像の横幅,画像の高さ)
  2. キャラクター変数名.image = ゲームオブジェクト変数名.assets[‘画像名’];
  3. キャラクター変数名.x = 0;
  4. キャラクター変数名.y = 0;
  5. ゲームオブジェクト変数名.rootScene.addChild(キャラクター変数名);
  6. 例　var dog = new Sprite(32, 32)
  7. dog.image = game.assets[‘dog01.png’];
  8. dog.x = 0;
  9. dog.y = 0;
  10. game.rootScene.addChild(dog);


ここまで書いたらブラウザで表示しているindex.htmlを読み込み直してみましょう。

うまくいっていれば犬の画像が表示されているはずです。


フレームの切り替えでキャラクターを動かす

表示させたキャラクターを今度は動かしていきます。

ゲームであればキャラクターを動かすというのは必要となる基本的な動作です。

その仕組みをしっかりと理解するようにしましょう。移動させるためには、キャラクターに対してイベントを設定する必要があります。

フレームに入ったときに処理されるようにenterframeと書き、キャラクターの横軸であるxに対して任意の数値を足していくのです。

このときキャラクターに対してのイベントであることは指定されていますので、thisと書くようにしましょう。

これで読み込んだ時点でキャラが横に移動するようになりました。

  1. キャラクター変数名.addEventListener(‘enterframe’, function(){
  2. this.x += 10;
  3. });
  4. 例　dog.addEventListener(‘enterframe’, function(){
  5. this.x += 10;
  6. });


このままだと、初めに指定したゲームの座標を超えるとキャラが消えてしまいます。

消えないようにしたいのであれば、ゲームの座標を超えたらキャラクターの座標を0に戻すというコードを書けば防ぐことが可能です。


アニメーションでキャラクターを動かす

アニメーションを取り入れるにはframeプロパティ

フレームの読み込みによって移動させるだけではありません。

Spriteオブジェクトのframeプロパティを使用することによって、キャラクターの画像に対してアニメーションさせることも出来ます。

アニメーションを取り入れると、例えば移動しているキャラクターに走っている表現をもたせることも可能です。


frameプロパティの使い方

アニメーションさせるためのframeプロパティですが、イメージを切り替えるために以下のコードで処理をさせることになります。

  1. this.frame = this.age % 2;


ageにはキャラクターが動いてからのフレーム数を表す値が格納されています。

そこへ%2とすることで常にフレーム数を2で割ったあまりをframeへ設定することが出来るのです。

そしてフレームに切り替えにわせてキャラクターにアニメーションさせられるようになります。

市販のゲームはこのような処理を活用して、非常に多くの部分をアニメーションさせているのです。

だからこそ普段目にしているゲームでは、なめらかに違和感なく楽しめます。


キャラの衝突判定を設定する

アクションやシューティングなどのゲームでは特に、キャラクター同士がぶつかった際に何かしらの変化をもたせることになるでしょう。

例えば

  • 自キャラと敵キャラクターがぶつかった際にHPを減らす
  • アイテムを取ったときにキャラクターの状態を変更させる

といった場合などに必要となります。intersectとwithinという2つのメソッドによって実現可能です。

例として、dogとcatという2つのキャラクターに対して衝突判定を設定してみましょう。


intersect

intersectメソッドの場合には『dog.intersect(cat);』と書きます。

これにより、dogとcatの領域が重なっているか判定することが出来るようになるのです。

触れていない状態ではfalseを返し、少しでも触れた場合にはtrueを返します。

ポイントとなるのは領域をチェックしているという部分です。

キャラの画像が描かれていない部分であってもそれが領域であれば触れたという判定になります。


within

withinメソッドでは、2つのキャラクターであるSpriteの中心位置が基準です。

指定した距離よりも近づいたかどうかによって触れたという判定をすることになります。

コードは『dog.within(cat, 50)』のように、触れたという判定をするための距離も指定しましょう。

これもintersectと同じくキャラの画像が描かれている部分ではなく、あくまでも指定した距離よりも近づいているかどうかで判定します。

そのためキャラの画像が描かれていないにも関わらず、触れたという判定がされることが起こるのです。

ただし、指定値次第ではintersectメソッドよりも精度を高めることはできるでしょう。


enchant.jsでゲームを開発する3つのメリット

プログラミング言語でゲーム開発をする際に、enchant.jsを使用することで得られるメリットは大きく分けて3つあります。

このメリットがご自身の考える開発にマッチするのであればenchant.jsはおすすめです。


クロスプラットフォームなので開発しやすい

通常であればどのブラウザであっても、正常に動作するように考慮する必要があります。

しかしenchant.jsはクロスプラットフォームであるため、特にそのあたりのことは意識しなくても開発に問題ありません。

些細なことですが、開発する側にとって大きなストレス軽減につながるメリットです。


開発をサポートするプラグインが豊富

開発の際に活用できるプラグインや画像などの素材が数多く出回っていますので、開発スピードが格段に早くなります。

またカスタマイズ性にも優れているため、複雑なゲームであっても簡単に作りやすいです。


学習環境が整っているので学びやすい

プログラミング学習といえば書籍を元にするのが王道ですが、近年では動画サイトなどでオンライン授業による学習が一般的となりつつあります。

enchant.jsに関しても同様で、code.9leap.netをはじめとするゲーム開発の学習サイトが多く存在しているのです。

初めての人にとってもチャレンジしやすい環境にあるといえるでしょう。


一部Android端末で起きる問題に注意

enchant.jsでゲーム開発をする際の注意点ですが、一部のAndroid端末で起こってしまう問題があるということです。

例えば、ピンチアウトやピンチインなどWebブラウザ上の表示を拡大縮小する操作があります。

ゲーム中の誤操作につながってしまうため通常viewportというメタタグを使用しますが、この指定がうまくいかない場合があるのです。

すべてのAndroidバージョンやブラウザに一括で対処することは難しいため、都度対応しなければなりません。

また、JavaScriptの動作速度に関しても、高解像度のものの場合に特に遅くなってしまいがちな傾向にあります。

開発時にはシェアの高い機種の実機で確認しながら進めていくと良いのではないでしょうか。


まとめ

enchant.jsを使ったゲームの開発の流れについて解説しました。

ここで紹介したものはシンプルなゲームに過ぎませんが、多くの機能やコードを応用することでよりクオリティが上がります。

ゲーム開発は就職や参画への大きなアピールポイントになるでしょう。特にゲーム業界に興味がある人は是非作ってみることをおすすめします。



toiroフリーランスはフリーランスエンジニア向けのSHIFTグループ案件・求人情報サイトです。

プライムベンダーだからこそ、商流が深い多重下請けや不要な中抜きは一切なく、高単価・適正単価で業務委託案件をご案内しています。

アカウント登録後には、さまざまなサービスや機能を無料でご利用いただけます。

  • 登録面談にてキャリア相談や案件マッチングのコツ、市場トレンドや耳寄りな情報をお伝えします
  • 本サイトでは公開していない非公開案件をすべて確認可能
  • ご希望条件に合うエージェントおすすめの案件を随時ご案内

個人事業主やフリーランスで活躍されている方、これから目指している方、少しでもご興味がある方はぜひお気軽にお問い合わせください！