オリジナルゲームエンジン「enchant-pixi.js」でのゲームの作り方

ドット絵ゲーム

enchant.js風にjavascriptでさっくりブラウザゲームが作れるpixi.js製の簡易ゲームエンジン「enchant-pixi.js」でのゲームの作り方をさっくり説明します。

(※enchant-pixi.jsの概要と入手先はこっち→enchant.js風のpixi.js製簡易ゲームエンジン作りました!!)

index.htmlについて

まず私のサンプルでは以下のようになっています。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <script src="pixi.min.js"></script>
  <script src="pixi-sound.js"></script>
  <script src="enchant-pixi.js"></script>
  <script src="tilemap.js"></script>
  <script src="main.js"></script>
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body { 
      position: relative;
      background-color: #222;
      text-align: center;
    } 
  </style>
</head>
<body>
</body>
</html>

ここで重要なのは<script src=”○○.js”></script>部分です。他はとりあえず無視でOK。

この<script src=”○○.js”></script>がプログラムを読みこんでる部分です。

で大事なのはこの順番で、先に読み込む必要のあるものから書いていきます。試しにmain.jsを上にするとエラーになってゲームができません。

これは他のファイルの内容をmain.jsで使っているからで、使う前に必要なファイルが読まれていないからです。

プログラムをファイルで分ける場合は順番に気を付けて下さい。

main.jsについて

私のサンプルではmain.jsにゲームのプログラムを書いてます。ファイル名に関してはmain.jsでなくてもOKです。

サンプルではファイルを減らすためにConfigとResourceがmain.jsに入ってますが本来は分けてConfig.js、Resource.jsを作った方が使いやすいです。

Config.jsはサンプルでは画面の解像度くらいしか書いてないですが、音量とかボタンとかストレージの名前とか、なんなら言語とかそういうのも入れて管理します。

必要なものをロード

ブラウザが読み込みを完了するとwindow.onload()という関数を実行します。ブラウザゲームはここから起動します。

const assets = [];
for (let key in Resource) {
  assets.push(Resource[key]);
}
let core;
//ブラウザロード完了からスタート
window.onload = () => {
  core = new Game(Config.Screen.Width, Config.Screen.Height, Config.Screen.BackGroundColor);
  core.preload(assets);
  core.onload = () => {
    core.replaceScene(new MainScene());
  }
}こ

ここでまずcore = new Game()でゲームに必要ないろんなもの(画面とか)が作られています。

で、core.preload(assets)で画像とか音楽とかを読み込んでいます。この読み込みが終わるとcore.onloadが実行されます。javascriptではonloadとか何か起こった場合(イベントっていう)に「on~」みたいな名前でいろいろ使われているので覚えておくと良いです。

ゲームはシーン単位で作ります

core.replaceScene(new MainScene())で新しいシーンが作られて画面が切り替わります。

ゲームはこのシーン単位で作っていくと作りやすく管理も楽です。

タイトル画面、ゲームオーバー、ポーズ画面、コンフィグ画面などなど完全に独立して作れるものはシーンで分けて作ります。

私のこのサンプルではタイトル画面が無いのでいきなりゲーム画面になってますがタイトル画面が欲しい場合はTitleSceneを作ってnew TitleScene()てすればタイトル画面が出ます(名前はTitleSceneでなくても好きに付けていいよ)。

replaceScene()

このシーンを切り替えるのにはcore.replaceSceneを使います。これは現在のシーンを破棄して新しいシーンと入れ替えます。

ゲーム開始時では実はLoadingSceneというシーンになってるんですがこいつを破棄してMainSceneに切り替わっています。

replaceSceneを使うと前のシーンは自動的に破棄されます。

pushScene()とpopScene()

replaceScene()と違って破棄せずに今のシーンの上に新しいシーンを作って表示するのがpushScene()です。ポーズ画面とかメニュー画面とか今のシーンを破棄したら困るときに使います。

今までのシーンは一時停止状態になって新しいシーンが動きます。

また元のシーンに戻したいときはpopScene()を使います。popScene()を使うと上にあったシーンが破棄されて一時停止していた元のシーンがまた動き始めます。

シーンの作り方

シーンはContainerを拡張して作ります。Containerは大雑把に言うと入れ物みたいなもです。

シーンの作り方はこんな感じです。

class MainScene extends Container {
  constructor(){
    super();
    //処理を書く
  }
  update(delta){
    super.update(delta);
    //処理を書く
  }
}

constructor()はクラスが作られるときに最初に実行される部分です。サンプルではここでマップやキャラが作られたり音楽が再生されたりしています。

update(delta)は更新処理を書くところです。サンプルでは空ですがここにキャラクターの操作や敵キャラクターのことなどを書いたりできます。引数のdeltaは更新スピードの情報みたいなやつでラグとかの帳尻を合わせたりするのに使ったりするようです(私は使ってないですけど)。

constructorのsuper()とupdateのsuper.update()は拡張するContainerがもともと持っている処理を引き継いて使うことができるようにしてくれる処理です。とりあえず書いておけばOKです。

Spriteについて

Spriteは画面に表示する画像を貼れる入れ物みたいなもので、このSpriteに画像を貼ってシーンにaddChild()すると画面に表示されます。○○.addChild()は○○に入れるみたいな感じです。

このゲームエンジンではSpriteとEnchantSpriteの二つがあります。

Spriteはpixi.jsのSpriteにupdate機能を追加しただけのものです。EnchantSpriteはenchant.jsのSpriteみたいに使えるようにしたものです。EnchantSpriteについてはこちらの記事に詳しく書いてます。

Spriteに画像を設定する場合は

this.texture = core.resources[Resource.Actor].texture;

という感じに書きます。core.resourceはcore.preload()で読み込まれたデータの保存場所です。この場合は画像がそのまま一枚画面に表示されます。

jsonファイルを使ったスプライトシートを使っている場合は

this.texture = core.resources[Resource.GabolinData].textures['player-0'];

という感じになります。

ContainerとSpriteのプロパティ

SpriteはContainerから拡張して作られているので共通のプロパティがあります。

座標などよく使うプロパティを説明します。

  • x、y・・・表示する座標です。addChildしたContainer上の座標になります
  • width、height・・・幅、高さ
  • scale・・拡大縮小率。1が基準。scale.xが幅、scale.yが高さです。マイナスにすると反転
  • rotation・・・回転。単位はラジアン
  • alpha・・・透明度。1で見える、0で見えなくなる
  • visible・・・trueで表示、falseで非表示
  • pivot・・・位置座標の基準となる場所。座標で設定
  • anchor・・・位置座標の基準となる場所(Spriteのみ)。(0, 0)だと画像の左上、(1, 1)で右下、中心なら(0.5, 0.5)
  • interactive・・・trueでタッチイベントが使えるようになる

基本的に使うのはこのくらいだと思います。

座標は

player.x = 1o;
player.y = 2o;

と入力したり

player.position.set(10, 20)

というふうに一度に設定もできます。

scaleもscale.set(1, 1)といった感じにできます。

pivotとanchorはx、yの座標の基準となる場所を設定します。基本は画面と同じで左上端が設定されています。これを例えば真ん中に変更したい場合に使います。

pivotは自身の左上を原点としたときにそこからどの位置化を座標で指定します。anchorは割合で決めます。anchorはSpriteだけがもっています。この基準位置は回転や反転の基準になります。

interactiveはtrueにするとタッチやマウスのクリックなどの処理が使えるようになります。ただし、Containerはtrueにしても上にSpriteなどが無いと反応しません。

もっと詳しく知りたい方はpixi.jsの公式サイトを見てください。

▷▷▷ PIXI.Sprite

▷▷▷ PIXI.Container

音の再生について

音楽や効果音の再生は

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

といった感じで、読み込んでる音データの後ろに.sound.○○をつけることで操作できるようになります。

  • play()・・・再生
  • stop()・・・停止
  • pause()・・・一時停止
  • resume・・・再開
  • loop・・・trueでループ再生
  • volume・・・再生音量

volumeはConfig.Volumeとか作っておいてvolume = Config.Volumeとかにして使うと良いと思います。

もっと詳しく知りたい方はpixi-sound.jsの公式サイトを見てください。

▷▷▷ PIXI.sound

その他

その他のpixi.jsの使い方はこちらのカテゴリーページにまとめています。

同カテゴリー記事

記事の感想・コメント

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

コメントを残す

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