enchant.js風の簡易ゲームエンジン作りました!!

enchant.jsの公式サイトが消滅してしまってけっこうたちますが、代わりとなるjavascriptの新しいブラウザゲーム用ゲームエンジンが全然出てこないのでpixi.jsを使って自分で作ってみました。

enchant.jsを真似て作ってあるので初心者でも扱いやすいと思います。初心者だけでなく、ゲームアイデアをさっくり形にしたいゲーム開発者さんにもおすすめです。

ゲームエンジンとして必要最低限の機能に絞っているので最初に学ぶことはすごく少なくjavascriptさえ分かっていればすぐ作れます。

pixi.js製(音もpixi-sound.js)でかなり簡潔に作っているので追加や改造もゴリゴリできると思います。

サンプルプログラムと入手先

とりあえずどんな感じのものができるか気になるところだと思うので先にサンプルを触ってみてください。

▷▷▷  サンプルプログラムを遊ぶ

サンプルは画面をタッチするとマスクのキャラがジャンプ&方向転換するだけです。あと左上のポーズボタンでポーズできます。

サンプルは非常に簡素ですが必要最低限にしてるから簡素なだけですからね!!作り込めばすごいのだって作れるんだから!(ちなみに筆者はこんなのを作ってますよ ▷ pixi.jsのゲーム)

サンプルプログラムは入手は以下の2つの場所から入手できます。お好きな方からどうぞ(‘ω’)ノ

▷▷▷ github

▷▷▷ BOOTH

先にソースだけ見てみたい人はこっちをどうぞ(‘ω’)ノ

▷▷▷ ソースを見る

ファイルの内容について

ダウンロードしたフォルダには以下のようなファイルが入っています。

ファイルの内容

pixi.min.jsとpixi.min.js.mapがpixi.jsのファイルです。バージョンはv5.3.7です。

pixi-sound.jsはpixi.jsの音楽再生プログラムです。バージョンはv4.0.4です。

上記のファイル以外は私が作ったものです。その中で「enchant-pixi.js」が今回私が作ったゲームエンジンです。他はサンプルゲームのためのプログラムです。

※注意事項:今回公開しているプログラムに関しては好きに使っていただいて構いませんが一緒に添付している画像・音楽は他では使わないでください。

ゲームを作るために必要なもの

pixi.jsは動作するためにはサーバーが必要です。index.htmlをブラウザにドラッグしても動いてくれません。

「サーバーってなんぞ?」という方も大丈夫です。

「visual studio code」をお使いの方は「vscode-live-server」というのをインストールすればOKです。参考記事 ▷ Qiita

もしくはxamppというアプリをインストールすればOKです 。参考記事 ▷ Qiita

プログラミング初心者の方へ

このゲームエンジンはjavascriptというプログラミング言語で作られています。もしjavascriptという言語がわからない場合は先にjavascriptの基本的な文法などを学んでおく必要があります。

初心者向けのjavascriptの簡単な説明記事があるので先にそっちを読んでみてください(‘ω’)ノ

またこのゲームエンジンには当たり判定の類は一切ありません。当たり判定はすべて自分で作る必要があります。基本的な当たり判定についてはこちらの記事を読んでみてください(‘ω’)ノ

enchant-pixi.jsの解説

enchant-pixi.jsはゲームを動かすための基幹となるプログラムが入っています。

ちなみにクラスやプロパティの名前などはけっこうenchant.jsと同じにしてあります。昔使ってた人は名前だけで内容が分かるかと思います。

Gameクラス

最初のGameクラスがいろんなものを管理しています。一番重要な部分ですがpixi.jsのおかげでだいぶコンパクトに出来ています。

Gameクラスの中身については難しいのでここでは解説しません。

ContainerクラスとSpriteクラス

その下に出てくるContainerクラスとSpriteクラスはpixi.jsのクラスを拡張したものです。この2つにupdateという更新機能をつけてゲームを作りやすくしています。

(※このupdate機能は「HTML5 ゲーム開発の教科書(Amazon)」という本を参考にしています(Gameクラスでもかなり参考にしてます)。難しい本ですが興味ある方はぜひ挑戦してみてください。)

pixi.jsでは画面に何か表示する際は基本的にこのContainerクラスとSpriteクラスという2つのクラスを使います。

Containerクラスは画面に表示するものを入れる入れ物みたいなものであとで説明するシーンもContainerクラスから出来ています。

SpriteクラスはContainerに画像表示機能が追加されたようなものです。なのでContainerのように他のSpriteをaddChildすることもできます。

EnchantSpriteクラス

EnchantSpriteはenchant.js風のSpriteにしています。

pixi.jsではスプライトのアニメーションにjsonファイルを使うんですがjsonファイルを作るのが面倒なのと初心者には向いていないと思うのでenchant.jsのように使えるようにしました。詳しい内容については下の記事に書いています。

ただ、この方法には「座標に小数点以下の数字があると画像にノイズが入る」という欠点があります。一応小数点以下を分ければノイズはでなくなりますが拡大・縮小・回転には効果が無いです。

ちなみにサンプルでは真ん中で動いてるデカいキャラがjsonを使ったやり方、ふんどし一丁のキャラがenchant.js風のスプライトになっています。

LoadingSceneクラス

LoadingSceneクラスはゲーム起動時に表示される画面です。

ローディング状況を%で教えてくれます。

ロードが完了するとゲームが始まります。

main.jsの解説

main.jsはサンプルゲームの処理が書かれているファイルです。

Config

設定用の変数を入れておくオブジェクトです。

今回は画面の解像度と背景色しか入っていません。

Resource

このサンプルゲームで使う画像や音楽、マップデータなどのアドレスが入っています。

これはアドレスに名札を付けてるようなもので使うときにResource.○○○みたいな感じで使うことができます。直接アドレスを書くよりわかりやすくなります。

このResourceオブジェクトの内容を

const assets = [];
for (let key in Resource) {
  assets.push(Resource[key]);
}

でurlだけ取り出してcore.preload(assets)でデータをゲームに読み込んでいます。

window.onload

これはブラウザでページを開いたときにページの情報の読み込みが完了すると実行される関数です。ここでGameクラスが作られてゲームのプログラムが動いていきます。

core.preload(assets)でデータを読み込みます。データの読み込みが完了するとcore.onloadが実行されてゲーム画面に切り替わります。

シーンの切り替え

ゲームはシーンという単位で分けて作るとプログラムが管理がしやすくなります。

タイトルシーン、ゲームシーン、ゲームオーバーシーン、ポーズシーンなど独立して作れるものはシーン単位に分けて作ります。

そのシーンを切り替える機能がreplaceSceneです。core.replaceScene(new MainScene())は新しくMainSceneというシーンを作ってそれに切り替えています。

シーン関連ではもう一つpushSceneとpopSceneというのがあります。これは切り替えではなく現在のシーンの上に一時的に別のシーンを表示します。ポーズボタンを押したときに一時的にPauseSceneというシーンが作られています。

tilemap.jsについて

RPGやアクションゲームを作りたい人のためにタイルマップ用のクラスを作っておきました。ただみんなが使うものでもないしゲームにもよると思うので別ファイルに分けました。

今回のマップデータはTiledMapEditorというマップエディターを使って作っていますが、1次元配列であれば別のエディターで作っても使えます。

このタイルマップを動かしたい場合はちょっと問題があって、「小数点以下を切り離す&戻す」処理を行わないと画面がノイズだらけになるので注意してください。

音の再生について

ゲームに使うデータはcore.preload()で読み込まれた後はcore.resourcesというところに入っています。

core.resources[Resource.MapTile]といった感じで指定すると取り出せます。

音楽ファイルは

core.resources[Resource.Bgm].sound.play();

という感じに後ろにsoundをつけて扱います。

play()、pause()、resume()、stop()などの再生関連の関数や

volume、loopといったプロパティがあります。

また再生などは

core.sound.play(Resource.Bgm)

という書き方もできます。

また、ポーズ画面など一時停止時に再生中の音を全部止めてくれるcore.pausePlayingSounds()とそれを再開するcore.resumePausedSounds()という処理を作っておきました。

入力について

ゲームではタッチ以外の操作方法も使いたい方がいるかと思います。

もちろんそういうのは自力で実装していく必要があります。

入力についてはこちらに記事があるので参考にしてください(‘ω’)ノ

Typescriptの記事なのでちょっと書き方が違いますがjavascriptでも同じようにできると思います。ただ、残念ながらゲームパッドだけはこの方法ではできません。

とりあえず以上です

とりあえずざっと簡単に説明しました。

今後ちょこちょこ記事を書いていこうかと思います。

あんまり反応が薄いと記事を書くモチベーションが保てないのでみなさんぜひはてなブックマークしたりシェアしたりしてください(‘ω’)ノ

pixi.jsの基本的なことを知りたい方はこちらの記事を読んでみてください。

あ、あと

「偉そうに書いとるお前はどんなゲームつくっとんねん!?おお~ん?」

という方は下のリンクから私のゲームを遊びに来てください(‘ω’)ノ

同カテゴリー記事

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。