ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　enchant.jsのダウンロードと開発準備

enchant.js / Ubiquitous Entertainment Inc.

　「enchant.js」を使ってゲームを作りたい。

　そんな方々も増えたのではないだろうか。「enchant.js」は確実に日曜ゲーム開発の敷居を下げたと思う。「enchant.js」を使えば今まで挫折してきた私も今度こそ作り切れそう！　と、そう思わせる確かな取っ付き易さがある。実際、とても分かり易い。

　このブログでは、スマートフォン向けのブラウザゲーム開発も視野に入れながら、プログラミング初級の方でもなるべく分かり易いように、「enchant.js」でのゲーム開発手法を解説していきたいと思う。

――――「enchant.js」が分かり易いといっても、必ず日曜ゲーム開発には壁が立ち塞がるだろう。

　例えば、RPGを作りたい。でも、その作り方が分からない。サイトも書籍も「TIPS」は豊富にあるが、それらをどう組み合わせればRPGとして成立するのか、分からない。

　そういった方々にも納得してもらえるように、ゲームの完成／リリースまでを、とにかく解り易く解説していきたいと思って取り組んでいる。解説していく過程でもしも間違った記載があれば、それらを題材に新たな記事にして、私がハマった問題点や注意点を示していく。

　なので、

「この箇所の記載が分かり難い」
「もっとこういうことが知りたい」

　ということがあれば、どしどしコメントをください。より良いものに改善していきます。この機会があなたのゲーム開発の扉となるように。

■enchant.jsとは？

　公式HPには、以下の記載がある。

　enchant.js は HTML5 + JavaScript ベースのゲームエンジンです。わずか30KBのソースコードで、PC, Mac, iPhone, iPad, Android すべてで動作するクロスプラットフォームなアプリケーションを開発可能なスタンドアロンライブラリです。

Ubiquitous Entertainment Inc.
http://www.uei.co.jp/product/enchantjs/

要するに、ゲーム開発をサポートしてくれるJavaScriptのライブラリってことだ。

■必要なものを用意しよう！

　まず、「enchant.js本体」をダウンロードする必要がある。以下のサイトからダウンロードしてほしい。

　enchantjs.com
[browser-shot width=”650″ url=”http://enchantjs.com/ja/download-ja/”]

　サイト内の「Download latest version of enchant.js」と書かれたボタンをクリックして、ダウンロード開始。「enchant.js-builds-0.7.0.zip」（※2013年8月現在）のダウンロードが完了したら、適当な場所に保存して、解凍（展開）する。

　解凍すると、色んなファイルが入っているが、差し当たり必要なものは、

　　enchant.js-builds-0.7.0build
　　enchant.js

　この「enchant.js本体」だけとなる。他はサンプルやプラグイン等なので、必要な時に必要なものだけ取り出して使う感じだ。

　さて、以下のようなフォルダ構成で、”空ファイル”と”キャラ画像”を用意して戴きたい。

「任意」フォルダ
　┗index.html　　　　　　　　⇒空のテキストファイル（名前と拡張子を変更、エンコーディングをUTF-8に）
　┗「js」フォルダ
　　　┗main.js　　　　　　　　⇒空のテキストファイル（名前と拡張子を変更、エンコーディングをUTF-8に）
　　　┗「lib」フォルダ
　　　　　┗enchant.js　　　　⇒ダウンロードした「enchant.js本体」
　┗「img」フォルダ
　　　┗xxx.png　　　　　　　　⇒ゲームで表示するキャラ画像

　「index.html」と「main.js」は、テキストエディタの「新規作成」で中身が空っぽのテキストファイルを作成し、名前と拡張子を変えて用意する（ゲーム実行時に文字化けしちゃうのでエンコーディングはUTF-8にしましょう）。

　そして、「js」フォルダの中の「lib」フォルダには、先ほど展開した「enchant.js本体」をコピーして格納する。

　で、「xxx.png」のゲームで表示するキャラ画像だが、すぐに用意が難しい人は、私がGIMPで作成した以下のMOTHER3ライクなキャラを、取り敢えずは使っておいてほしい。透過を施してある。

　参考：GIMPで特定の色を透明（透過）にする方法

■ゲームを表示するhtmlを書く

　では、「HTML5の最低限のひな型」を用意し、enchant.jsを読み込もう。index.htmlをテキストエディタで開き、以下の内容を書き込んで保存してほしい（以下をそのままコピーして使えるぞ☆）。

[html firstline=”1″ highlight=”5″ title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ここにゲームのタイトルを書く</title>
<script type="text/javascript" src="./js/lib/enchant.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<style>
/* ウィンドウとゲーム画面の隙間をなくす */
body {
background: #000;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!– ここにenchant.jsで作られたゲームが表示される –>
</body>
</html>
[/html]

　このhtmlは、実際にenchant.jsで作られた画面が表示される部分となる。細かいところは省くが、ここで重要な個所はハイライトした”5行目”だ。

　この「viewport」は、WEBページに表示されるコンテンツの幅を「閲覧している端末に応じて自動で調整する」為の設定だ。この指定をしていないと、スマートフォンから見た際に、画面に収まらない大きさで表示されてしまうことがあるので注意が必要だ。viewportのwidthを「device-width（閲覧している端末の幅）」としておくことで、コンテンツを画面の幅にちょうど合わせることができる。

　また、今回はゲーム開発が目的なので、「user-scalable（ユーザーによる画面サイズの変更）」をfalseに指定し、ゲーム中に勝手に拡大／縮小されないようにしておこう。

　enchant.jsは「HTML5を対象とした言語」なので、表示の確認には「HTML5に対応したWebブラウザ」が必要だ。スマートフォンやタブレット端末のほとんどがHTML5に対応しているが、PCブラウザだと対応していない場合も少なくない。PCで確認する場合は、Google Chrome、または、Safari 3以降、もしくは、Internet Explorer 9以降で行うのが良いだろう。特に、ChromeとSafariは、それぞれAndroid、iPhoneの標準ブラウザに近い（共に「WebKit」と呼ばれるブラウザエンジンを使っている）為、信頼できると言って良い。

■main.jsのひな型・・・いやちょっとまって

　以下は、enchant.jsを触り始める為には必要不可欠だと言っても過言ではない「ひな型」だ。基本的には、以下の「game.onload = function(){}」の中に、ゲーム中で行う処理を書いていく。

[javascript firstline=”1″ highlight=”15″ title=”main.js”]
enchant();

window.onload = function() {
// 表示領域を設定（幅と高さ）.
var game = new Game( 480, 640 );

// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
game.fps = 24;

// pre（前）-load（読み込み）、ゲームで使用する素材を予め読込.
game.preload( ‘./img/xxx.png’ );

// メイン処理を実行.
game.onload = function() {
// ここに処理を書いていく.
}

// ゲームをスタート.
game.start();
}
[/javascript]

　のだが、多くのサイトで紹介されているこの「Game」クラス、実は、現状の最新バージョンでは、非推奨だ。

http://wise9.jp/archives/8077

Game -> Core (renamed)
widget.enchant.js などの登場で、enchant.js を使ってゲームではないアプリケーションを開発することができるようになりました。v0.6 からは、Game クラスは Core クラスと改称されました。Game クラスは、単に Core クラスの別名になります。

// dev/src/Core.js
enchant.Core = enchant.Class.create( … );

// dev/src/Game.js
enchant.Game = enchant.Core;

今までどおり Game クラスは使えますが、互換性の面から推奨しません。Game クラスを継承しているプラグインも正しく動きますが、今後 Game クラスを継承するようなプラグインをアップデート / 作成する場合は、Core クラスを継承するように変更することをおすすめします。

　リファレンスを見ても不思議な書き方だったのだが、これでやっと理解できた。「Game = Core」と書いてあるのだ。

http://wise9.github.io/enchant.js/doc/core/ja/symbols/enchant.Game.html
[browser-shot width=”650″ url=”http://wise9.github.io/enchant.js/doc/core/ja/symbols/enchant.Game.html”]

■main.jsのひな型、はこちら

　以下は、前述のものをGameからCoreへ置き換えたものだ。以下を「ひな型」として用いてほしい。

[javascript firstline=”1″ highlight=”5,8,11,14,19″ title=”main.js”]
enchant();

window.onload = function() {
// 表示領域を設定（幅と高さ）.
var core = new Core( 480, 640 );

// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
core.fps = 24;

// pre（前）-load（読み込み）、ゲームで使用する素材を予め読込.
core.preload( ‘./img/xxx.png’ );

// メイン処理を実行.
core.onload = function() {
// ここに処理を書いていく.
}

// ゲームをスタート.
core.start();
}
[/javascript]

■ひな型をダウンロード

　enchant.js本体は二次配布になるのが嫌で含んでいないが、それ以外のファイルや画像は、前述したディレクトリ構成で以下に圧縮してある。自分で用意するのが面倒な人は、良かったら以下をダウンロードして使ってほしい。

　でもなるべく、上記も含めて自分でやった方がいいけどね。覚える為にも。

　⇒⇒⇒　GameDevelopedByEnchantjs.zip

■キャラ画像を表示してみる

　さて、ここまで準備が整ったら、いよいよキャラ画像の表示が可能だ。まずは何と言ってもキャラの表示。とにかくキャラが表示されなきゃ始まらない。

　が、その詳細は、次の記事、”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　キャラクター画像を表示してみる”、で！

■おまけ

@ashibehair_m 数はもっとあると思いますよ。足りないものはエコシステムだと思いますね。これにはお金と手間と時間がかかります。だから会社が本気で取り込んでないエンジンはユーザーを獲得できないのです

— Ryo Shimizu (@shi3z) September 7, 2013

（アシベズヘア@ashibehair_m）

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【RPG（ロールプレイングゲーム）篇】　戦闘シーンにステータスゲージ（HPゲージ）を表示する

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【RPG（ロールプレイングゲーム）篇】　戦闘シーンにステータスウィンドウ（状態表示枠）を表示する

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【RPG（ロールプレイングゲーム）篇】　戦闘シーンに切り替える

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　直線を描く

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　円を描く

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　バーチャルボタン（Aボタン／Bボタン／Xボタン／Yボタン）を表示してみる

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　キャラクター画像をバーチャルパッド（十字方向キーパッド）で動かしてみる

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　キャラクター画像をキー入力で動かしてみる

ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　キャラクター画像を表示してみる

日	月	火	水	木	金	土
« 1月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

materialize.jp