ランゲーの作り方①　まずは準備から【enchant.js】

enchant.jsはまだまだ現役バリバリで使えるよ！

今や過去のものとなってしまったかのようなenchant.jsですが、いやいやまだまだ現役でゲーム作れますぜ！！ってことでゲーム開発講座をやってみたいと思います。

enchant.jsの良い所は特に開発環境を用意する必要がなくテキストエディタとブラウザさえあればすぐに開発でることです。まったくの初心者でもすぐにゲーム開発できます。初心者にとってこの手軽さはかなり大きなポイントだと思います。

テキストエディタとはプログラム書いたりするソフトでwindowsのメモ帳もそうなんですけど、メモ帳で書くのはちょっと厳しいのでこれだけは用意してください。ちなみに私はBracketsというテキストエディタを使っています。もしテキストエディタを持ってない方はこちらからダウンロードできます→Brackets

さて、講座といっても私も素人開発者なので私のやり方が正しいなんてことはなく、「私はこういう風に作りました」ということを書いていくだけなのでプログラムとして正しくなかったり、無駄なことしてるところもあったりすると思いますので「ゲームの作り方の一つの例」として見てください(‘ω’)ノ

それからenchant.jsでゲームを作るにはjavascriptというプログラミング言語を使って行うんですがjavascriptがそもそもわからないという方は先に少しjavascriptの基本文法を勉強してください。

また、enchant.jsの基本的な部分に関してもここではあまり説明しません。基本的な部分の説明はもうすでに多くのサイトでされているのでわからないところは検索してください。

では、さっそくゲームの開発に入るわけなんですが、いくらenchant.jsがあると言っても一からゲームを作っていくのはとても大変なので私の作成したテンプレートをベースに開発していきます。必要最低限のプログラムが既に作ってあるのでゲーム制作がスムーズに進みます。ダウンロードはこちら→ファイルのダウンロード

私のテンプレートには一緒にenchant.jsも入っていますが他のプラグインは入っていないので欲しい方はenchant.jsのページから全部ダウンロードしてください→enchant.jsのダウンロード（ダウンロードできなくなりました）

私のテンプレートプログラムはこんな感じになってます。

テンプレートプログラムを実行してみる

templateファイルをダウンロード＆解凍してindex.htmlファイルを実行してみてください。ブラウザが開いてゲームが始まります。

タイトル画面が表示されて画面タッチをするとゲーム画面に切り替わります。ゲーム画面にはへのへのもへじのキャラクターが表示されていて画面をタッチしながら動かすとキャラを動かすことができます。

左上にはポーズボタンがあり、ボタンを押すとポーズ画面になります。RESUMEをタッチするとゲーム再開、TITLEをタッチするとタイトル画面に戻ります。

右上には時間のカウントダウンが表示されていて0になるとゲームオーバー画面になります。ゲームオーバー画面ではツイートボタンが表示され、押すとツイート画面が表示されツイッターに投稿できるようになります。

この時点では音は再生されませんが音の再生機能もついています。音楽ファイルを用意すればゲーム内で使うことができます。無料で使える音楽素材サイトをまとめているのでよかったらチェックしてみてください。

無料で利用できる音楽・効果音素材サイト集

テンプレートの説明

今回はまずテンプレートの説明をしたいと思います。

var FPS = 30;
//画面サイズ関係
var SCREEN_WIDTH = 640; //画面幅
var SCREEN_HEIGHT = 900;//画面高さ
var GAME_SCREEN_HEIGHT = 900;//ゲーム画面
var GAME_SCREEN_WIDTH = 640;//ゲーム画面

FPSは1秒間に画面を更新する回数です。一般的なテレビゲームは60FPSなんですがenchant.jsはブラウザ上で動くため処理が遅いので半分の30FPSにしておきます(調べてみてね)。今のスマホなら30FPSでもだいたい問題なく動くと思います(ちょっと前までは30FPSでは処理落ちしていた)。

画面サイズは解像度とアスペクト比です。数字が大きいほど画面の表示がきれいになりますが大きな画像が必要になりデータが重くなるのでこのくらいが良いかと思います。アスペクト比はスマホは3：2くらいなんですがブラウザのアドレスバーがどうしても表示されるため縦を少し短くしています。

SCREEN_WIDTHとGAME_SCREEN_WIDTHの２つあるのはSCREEN_WIDTHは画面のサイズ、GAME_SCREEN_WIDTHはゲーム画面のサイズです。例えば画面下にコントローラー部分を作ったりする際にGAME_SCREEN_HEIGHTをコントローラー分小さく設定して使ったりするためです。

//ゲーム場面用定数
var SCENE_TITLE = 1;
var SCENE_MAINGAME = 2;

これはゲーム画面を切り替えるときに使います。数字で管理するよりわかりやすくするために変数を利用ます(上の画面サイズも同様ですね)。全部大文字で書いてある変数はプログラム内で変更しない変数と決めておきます。そしてこの変数を数字の代わりに使います。こうしておけばもし後で設定を変更したいときがあった場合(画面サイズを変えたいとか)、ここだけを修正すれば済みます。

//データはここへ
var ASSETS = {
    img_title:'img/title.png',
    img_player:'img/player.png',
    img_pause:'img/pausebutton.png',
    img_buttons:'img/buttons.png',
    img_gameover:'img/gameover.png',
    /*
    se_start:'sound/aaa.mp3',
    se_ok:'sound/bbb.mp3',
    se_cancel:'sound/ccc.mp3',
    se_select:'sound/ddd.mp3',
    bgm_main:'sound/abc.mp3',
    bgm_gameover:'sound/def.mp3',
    */
};

ASSETSはゲームで使う画像などのファイル情報を管理するオブジェクトです。必要なファイルはここに書いておいて後で一気に取り込みます。音のファイルの部分はコメントアウトしてます。音楽ファイルがあればコメントを解除してファイルを指定してください。

まとめ

とりあえず今回はここまで。テンプレートの残りの部分は私の「知ったか講座」を読んでいただければなんとかなると思います(^^;)

ということで、次回から実際にランゲーを作成していきたいと思います。

あと、一応スマホで動かすことを前提にしているのでスマホで遊べるようにしたい方はゲームをアップロード出来る場所を用意してください。もしアップする場所が無ければこれを機に自分のサイトを作ってみてはいかがでしょうか？(*´ω｀)

では、また次回に(‘ω’)ノ

次回：ランゲーの作り方②　キャラクターと背景の表示