いんわんのブログ

【enchant.js】初心者でも簡単にゲームが作れるテンプレート

enchant.jsテンプレート公開

enchant.jsを使って初心者でも簡単にゲームが作れるテンプレートを公開します。初心者でもこのテンプレートをベースに私の記事やネットで作り方を調べればなんとかなるんじゃないかと思います。

 

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

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

 

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

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

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

 

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

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

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

 

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

 

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

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

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

 

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

 

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

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

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

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

 

公開するにあたってプログラムを読み返したりしていないので変な部分もあるかと思いますが気づいたら「プププッ」と笑って修正or削除てください(;^ω^)

 

enchant.jsテンプレートのプログラムについて

ファイルの読み込み

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

 

シーンの構成と切り替え

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

 

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

 

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

 

enchant.jsテンプレートを使ったゲームの作り方

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

 

ゲームはMainGameSceneにプログラムを書いていきます。とりあえずプレイヤーだけ表示しています。後は自分で作ってください。

ゲーム制作に必要な情報は私のブログの記事、もしくはネットで検索して頑張ってください。enchant.jsの記事はネットにかなりたくさんあります。

 

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

 

テンプレートについてわからないところがあればコメントに書いてください。

 

関連記事