【enchant.js入門】簡単にゲームが作れるテンプレート

 

enchant.js初心者でも簡単にゲーム制作ができるようにある程度作ってあるテンプレートを公開します。

初心者でもこのテンプレートと一冊enchant.jsの本を買ってくれば何とかゲームつくれるんじゃないかと思います。

このテンプレートには2種類あって一つは普通のカジュアルゲームを作るシンプルなバージョン、もう一つはゲームボーイ風コントローラーのついたバージョンです。上のGIFのゲームはコントローラー付きバージョンで作っています。

またenchant.jsも少しだけ改造してあります。

以下のリンクからダウンロードできます。

▷▷▷　カジュアルゲーム版

▷▷▷　ゲームボーイスタイル版

ついでに各テンプレートを使って実際に作ったゲームがこちらです。

カジュアルゲーム　▷▷▷　へのへのもへピ

ゲームボーイスタイル　▷▷▷　Cosmo Fighter

enchant.js製のゲーム一覧　▷▷▷　enchant.jsタグ

がんばればenchant.jsだってけっこうなクオリティーのゲームが作れます。

enchant.jsテンプレートファイルの使い方

enchant.jsのゲームはシンプルなjavascriptファイルなのでindex.htmlをダブルクリックするだけでゲームを起動できます。

プログラミングを改造したい場合は各javascriptファイルをエディタで直接変更してください。

音楽ファイルは添付していないので音楽再生部分のプログラムはすべてコメントアウトしてあります。音楽を使いたい場合はご自分で音楽ファイルを用意してコメントアウトを外してください。

テンプレートファイルの構成について

このテンプレートはいくつかのファイルで構成されています。

• enchant_kai.jsは私がちょっと改造したenchant.jsファイル
• inwan_base.jsは私の自作クラスや関数が入ったファイル
• inwan_keypad.jsはゲームボーイコントローラーのプログラム

となっています。これらのファイルはゲームプログラムを書くmain.jsより前に読み込む必要があるのでindex.htmlでは必ずmain.jsより前に書いてください。

プログラムについて

ファイルの読み込み

画像や音楽ファイルはASSETSオブジェクトに記述して一括で読み込みます。読み込まれたものはcore.assetsに保存されています。

シーンの構成と切り替え

このテンプレートではタイトル・ゲーム・ポーズ・ゲームオーバーの4つのシーンで構成されています。シーンごとに役割が分かれています。

基本的にはこのシーンを切り替えることでタイトル画面やゲーム画面に切り替わります。シーンの切り替えはsystemクラスのchangeScene()が行っています。

ポーズシーンだけは特別でゲームシーンの上に出るようになっています。pushScene()というメソッドで現在のシーンの上に表示されるようになっています。上に表示している間は下のシーンは停止しています。

ゲームの作り方

シーンの切り替えや音楽再生機能など必要な部分はすでにできているので作るのはゲーム部分だけです。

ゲームはMainGameSceneにプログラムを書いていきます。とりあえずプレイヤーだけ表示しているので後は自分で作ってください。ゲーム制作に必要な情報は私のブログの記事、もしくはネットで検索して頑張ってください。

プログラムを作っていく際、クラスという概念がわかるようになるととても効率よくプログラミングできるようになるので初心者の方はクラスの使い方を勉強すると良いと思います。

▷▷▷　enchant.jsのクラスの作り方

また、このテンプレートの内容についても過去の記事でいくつか書いているものがあるので参考にしてください。

テンプレートについてわからないところがればコメントに書いてください。ただし、返信がすぐに帰ってくることは期待しないでください（；^ω^）

あとがき：プログラム職務経験０のおっさんの本気

このテンプレートは専門学校中退・プログラミングの職務経験０の独身中年フリーターのおっさんが2年独学でゲーム制作を通して試行錯誤しながら築き上げたものです。

始めたころは一応C言語の基本文法程度は知ってる程度で「クラス？オブジェクト？なんじゃそりゃ？」レベルからここまでできるようになりました。

2年本気でやれば人間意外とできるようになるもんです(´∀｀)

なので皆さんもがんばってプログラミングしてください(‘ω’)ノ

★このテンプレートで作ったゲームがこちら