JavaScriptはウェブサイト上でアニメーションなどの動きをつけたり、何らかの操作に対してアクションを起こすようなプログラムを作るのに使われているプログラミング言語ですがゲームだって作ることができます。
JavaScriptで作るゲームはブラウザ上で動作するのでブラウザゲームといいます。このブラウザゲームのもっとも良いところはPCでもスマホ(iPhoneでもAndroid)でもタブレットでもブラウザさえあれば遊ぶことができることです。
最近はWebGLというブラウザの描画を高速にしてくれる機能やスマホの高性能化のおかげでブラウザゲームでもスマホアプリに負けないようなものを作ることができるようになってきています。
この記事では初心者にもわかるように(そのつもり！)Javascriptでのブラウザゲームの作り方を解説しています。これでは物足りない脱初心者の方は他にもいろいろ記事を書いているのでそちらも読んでみてください ▷ PixiJSの記事一覧
今回はゲームの作り方が中心なのでJavaScriptについての説明は全くありませんが、もしJavaScriptという言語がまったくわからない方は基本文法程度だけでも先に勉強してきてください▷ JavaScriptの超基本文法
JavaScriptは上に書いたようにweb関係で使われる言語なのでゲーム開発を通じて学んでおくと将来役に立つかもしれないですよ。
ちなみにこの記事の筆者のいんわんは4年ほどずっとブラウザゲーム一筋で作っています。
上の動画のようなレトロなゲームやパズルゲームなどいろいろ作って私のゲームサイトで公開しているので遊んでみてください。
ゲーム以外でもサイトのいろんなところでJavaScriptを使って演出を入れています。サイトのデザインにも力を入れてるのでそっちも注目してもらえると嬉しいです。
目次
JavaScriptの２D描画ライブラリ「pixi.js」
JavaScriptでゲームを作っていくわけですがJavaScriptだけで一から自分でプログラミングしていくのは非常に大変です。なのでPixiJS(pixi.js)というライブラリを使って作っていきます(JavaScriptでフルスクラッチでゲーム作りたい方はこちらの記事をどうぞ )。
PixiJSはWebGLというブラウザでも高速で画像を描画できる機能を持っている２D描画ライブラリです。
ただ、残念ながらこのPixiJSはゲームエンジンではないのでゲームを作るには必要な機能を自分で作る必要があります。
しかしそれではかなり大変なので私が作ったPixiJSの簡易ゲームエンジン「p94e.js」(ぴくしーって呼んでね(^^;))を使って難しいところはすっ飛ばして作っていきます。
p94e.jsについてはこちらの記事に書いています ▷ PixiJSで簡易ゲームエンジン作りました
p94e.jsの中身については初心者の方はあんまり気にする必要はありません。上級者の方は気に入らないところは好きに改造してください(^^;)
ちなみにPixiJSは検索してもあんまり情報が無くて知名度が低く思われるかもしれませんが、あのRPGを作れる有名ソフト「RPGツクール」にも使われているらしいので知られていないだけでけっこう使われているっぽいです(たぶんね)。
JavaScriptでブラウザゲームを作る環境を準備する
まずはJavaScriptでブラウザゲームを作れる環境を準備しましょう。
エディタを用意
プログラムでゲームを作っていくにはプログラムを書く専用のエディタがあった方が作業が楽になります。
最近はVisual Studio Codeというのが人気らしいので流行りに乗って使いましょう。人気のあるものは情報も多くて何かと便利ですからね！
サーバー機能を追加
PixiJSで作ったゲームを動作させるにはサーバーが必要です。Visual Studio Codeではこのサーバーの役割をしてくれる機能を拡張で入れることができます。
上のリンクからインストールできます。
インストールすると画面右下端あたりに下の画像のようなものが表示されます。
これをクリックするとブラウザが開いてプログラムが実行されます。
ブラウザゲーム開発ファイルをダウンロード
開発の準備ができたのでpixi.jsとp94e.jsなどのファイル一式をダウンロードしてください。
下のお好きな方からダウンロードしてください。
▷ Github
zipファイルがダウンロードされるのでそれを展開するとデスクトップにフォルダが作られると思います。
開いたフォルダの中身は上の画像のようになっていると思います。
audioフォルダは音ファイル、imageは画像などを入れるフォルダです。pixi.○○はPixiJS関係のファイルです。p94e.jsは私の作ったゲームエンジンのプログラムです。
main.jsがゲームのプログラムを書くファイルです。このmain.jsにこれから追加したり変更したりしてゲームを作っていきます。
ではこのすべてのファイルが入っているフォルダを起動しているVisual Studio Codeにドラッグしてください。そうすると全部のファイルをエディタで見ることができるようになります。
Visual Studio Codeで開いたら上記にあるように画面右下にある「Go Live」をクリックするとブラウザが起動してプログラムが実行されます。
上のような画面が表示されていればOKです。画面をタッチしてぐりぐりするとキャラクターが動きます。
今回のこのプログラム一式はここからゲーム開発を始めやすいようにキャラクター以外のものは何もありません。新しくゲームを作るときはフォルダごとコピーしてゲームを作ってください。
ゲームプログラムを見てみよう
main.jsがゲームのプログラムを書くファイルです。
サンプルのmain.jsの中身の説明をここに書くのはかなり大変になりそうだったのでプログラム内にコメントでかなり書き込んでいます。とりあえずコメントを読んでその部分が何をしている所なのか何となくイメージしてください。
以下の記事にもPixiJSの説明を書いているので交互に読んだりして理解を深めてください。
main.jsを改造してゲームを作ってみよう！
では実際にmain.jsを少し改造してゲームっぽいものを作ってみましょう！！
サンプルとしてこんな感じのものを作ってみたので下の記事を読みながら頑張って作ってみてください。
▷ サンプルゲーム
ボールを追加
まずはこんな画像を用意してください。
ボールです。大きさは128×128です。面倒くさい方は上の画像を保存してください。そして画像をimageフォルダに入れてください。で下記のようにResourceに追加します。
const Resource = {
Actor: 'image/player.png',
PauseBtn: 'image/pausebutton.png',
Bgm: 'audio/rescue.mp3',
Pause: 'audio/pause.mp3',
Ball: 'image/ball.png'//追加
}
次にMainSceneの上の所のplayer変数があるところに
let player;//プレイヤーの変数 let ball;//追加
ball変数を追加してください。
そしてMainSceneの「player = new Player(128, 128);」と書いている所の上に
ball = new EnchantSprite(128, 128); ball.image = core.resources[Resource.Ball].texture; ball.anchor.set(0.5, 0.5); ball.position.set(Config.Screen.Width * 0.5, 128); this.addChild(ball);
を追加してみてください。すると画面にボールが表示されるはずです。
もし何も表示されなかったら何か間違いがあります。エラーについては次のセクションに書いているのでエラーが出た場合はそちらを先に読んでください。
ballはEnchantSpriteというクラスで出来ています。このEnchantSpriteというクラスはPixiJSのSpriteをenchant.js風に使えるように拡張したものです。内容についてはこちらの記事で詳しく解説しています ▷ PixiJSのSpriteでJSON無しでフレームアニメーションさせるやり方
Spriteは簡単に言うと画像を画面に表示してくれるクラスです。EnchantSpriteはそれにenchant.js風の機能を持たせたものです。
ballの表示プログラムをplayerの前に書きましたが、playerの後に書いても起動時の見た目は同じになります。この順番が何に影響するかというと重なったときに上になるものが違ってきます。
プログラムでは後で画面に描画された方が上になります(後にaddChildした方が上になる)。ゲームを作るときに重なったときにどっちが上になった方が良いのかを考えて書く順番を決めます。
もちろんプログラムで重なり順を変える方法もあるんですが動的に変更するようなことでもなければ基本的に描画順でやった方が楽です。
ボールとのあたり判定
次はゲームらしく当たり判定をつけます。MainSceneのupdateに当たり判定を追加します。
updateは1秒間に60回実行される特殊な関数です。このupdateに書いたプログラムは1/60秒毎に実行されるのでキャラを動かしたりなどゲームらしいことをするのに使います。当たり判定も毎回チェックしたいのでここに書きます。
update(delta){
super.update(delta);
const dx = player.x - ball.x;
const dy = player.y - ball.y;
if(dx * dx + dy * dy < (64 + 48) * (64 + 48)){
console.log('hit');
}
}
これで当たったらコンソールに「hit」と表示されます(コンソールはエラーメッセージとか表示されるところね。下のエラーの説明読んでね)。
上の例では円の当たり判定を使っています。プレイヤーもボールも128ドットの画像ですがプレイヤーの分は若干小さくしたいのでプレイヤー分の半径を小さめの48として計算しています。
当たり判定についてはこちらの記事で解説しています ▷ ゲームで使われる基本的な当たり判定
やられた処理
当たったらやられた演出が欲しいのでそれっぽく作ってみましょう。
まずplayerクラスにフラグを追加します。
class Player extends EnchantSprite {
constructor(width, height){
super(width, height);
this.anchor.set(0.5, 0.5);
this.walkAnime = [0, 1, 2, 1];
this.animeCount = 0;
this.image = core.resources[Resource.Actor].texture;
this.isMove = false;
this.isDead = false;//フラグ追加
}
でupdateにやられた演出を追加します。
update(delta){
super.update(delta);
if(this.isDead){//やられた！
this.rotation += 0.2; //ぐるぐる回転
this.y += 10;//下に飛んでいく
return;//ここで処理から抜ける
}
//略
MainSceneのupdateの当たり判定でフラグを変更します。
update(delta){
super.update(delta);
if(player.isDead)return;//もう死んでたらここから出る
const dx = player.x - ball.x;
const dy = player.y - ball.y;
if(dx * dx + dy * dy < (64 + 48) * (64 + 48)){
player.tint = 0xFF00000;//プレイヤーを赤くする
player.isDead = true;//死んだ！！
}
}
すでに死んでいる場合はもう当たり判定の必要は無いのでif(player.isDead)returnで処理から抜けています。
tintは色を変えられる便利なプロパティです(厳密には「変える」とは違うんだけど)。
で、死んだら操作できないようにタッチの処理も抜けるように追加します。
this.on("pointerdown", (e) => {
if(player.isDead)return;
//略
});
this.on("pointermove", (e) => {
if(player.isDead)return;
//略
});
ゲームオーバー画面
ゲームが終了したらゲームオーバー画面をだしたいので作ります。
ここは楽してポーズ画面をコピーしてちょっと修正すると良いです。
//ゲームオーバーシーンのクラス
class GameoverScene extends Container {
constructor(){
super();
this.interactive = true;
const bg = new PIXI.Graphics();
bg.beginFill(0xFF0000);//赤にした
bg.drawRect(0, 0, Config.Screen.Width, Config.Screen.Height);
bg.endFill();
const texture = PIXI.RenderTexture.create({width: Config.Screen.Width, height: Config.Screen.Height});
core.app.renderer.render(bg, texture);
const backGround = new PIXI.Sprite(texture);
backGround.alpha = 0.4;
this.addChild(backGround);
//GAME OVERの文字表示
const text = new PIXI.Text('GAME OVER', new PIXI.TextStyle({
fontFamily: 'sans-serif',
fontSize: 96,
fill: 0xff0000,
}));
text.anchor.set(0.5, 0.5);
text.position.set(Config.Screen.Width*0.5, Config.Screen.Height*0.5);
this.addChild(text);
}
}
で、これをプレイヤーが死んで画面外に出たときに表示されるようにMainSceneのupdateを変更します。
update(delta){
super.update(delta);
if(player.isDead){
if(player.y > Config.Screen.Height){//画面外まで飛んでった！！
core.resources[Resource.Bgm].sound.stop();//BGM停止
core.pushScene(new GameoverScene());//ゲームオーバーシーンを表示
}
return;
}
//略
ボールを動かす
最後にボールを動かしましょう。止まったままじゃゲームらしさが足りないですからね。
ボールは画面端で跳ね返るようにします。
ballに移動量用の変数を追加します。
ball = new EnchantSprite(128, 128); ball.image = core.resources[Resource.Ball].texture; ball.anchor.set(0.5, 0.5); ball.position.set(Config.Screen.Width * 0.5, 128); ball.vx = 2;//追加 ball.vy = 2;//追加 this.addChild(ball);
次にMainSceneのupdateで移動させて画面端に当たった場合は跳ね返るようにします。壁に当たるときは座標がボールの真ん中にあるので半径分外側になります。
update(delta){
super.update(delta);
ball.x += ball.vx;//移動
if(ball.x - 64 < 0 ||ball.x + 64 > Config.Screen.Width){//端に当たった！！
ball.vx *= -1;//プラスマイナスを変える
}
ball.y += ball.vy;
if(ball.y - 64 < 0 ||ball.y + 64 > Config.Screen.Height){
ball.vy *= -1;
}
if(player.isDead){
if(player.y > Config.Screen.Height){
core.resources[Resource.Bgm].sound.stop();
core.pushScene(new GameoverScene());
}
return;
}
//略
跳ね返るのは単純にプラスマイナスを変えて移動する向きを変えているだけです。
いろいろ改造して遊んでね
サンプルの説明は以上です。あとは自分で改造しながらいろいろ試してください。
私の説明が下手であんまり内容が分からなかったとしてもあちこち数値変えてみたりいろいろ変えてみると良いと思います。
いじっくてればそのうち分かってくるもんですぜ(‘ω’)ノ
エラーがあった場合の対処の仕方
エラーなどを確認するにはChromeの場合は右上にあるメニューからデベロッパーツールを開いて確認できます(Edgeも似たところにあります)。
デベロッパーツールを開いたら上にあるメニューの「console」をクリックします。
するとエラーメッセージなどが表示される画面が下に出ます。
赤字でこんな感じのメッセージが表示されていたらエラーです。右上にファイル名と行番号が表示されているのでそのあたりをよく見てエラーを見つけましょう。この例では変数名が間違っています。
エラーやバグというのは嫌なものですが何度も経験するとある程度原因の予測がつくようになってくるので挫けずに頑張って対処してください。
ブラウザゲームを作ったら公開しよう
ゲームを作ったら公開していろんな人に遊んでもらいたいですよね。
ブラウザゲームを公開する方法には投稿サイトか自分のサイトでの公開があります。
ゲーム投稿サイトで公開する
ブラウザゲームを公開する方法で一番簡単なのがゲーム投稿サイトに投稿する方法です。
ゲーム投稿サイトならお金もかからないし、投稿するだけでもけっこう多くの人に遊んでもらえます。投稿サイトとして有名なのは、ゲームアツマール、ふりーむ、フリーゲーム夢現、PLiCyなどがあります。
どのサイトも投稿すれば作ったゲームを載せてくれると思いますが、中途半端なものではなくちゃんとしたゲームを作って投稿しましょう(上手い下手は関係ないよ。ちゃんと作っていることが大事！)。
投稿するときはプログラムや画像などの入ったフォルダをzipファイルにしてアップします。多分どのサイトもzipにしてアップロードするだけでできると思うのでとても簡単です(もちろん説明文とかの記入もあるよ)。
ゲームをzipにするにはwindowsならゲームの入っているフォルダを右クリックすると表示されるメニューの中にzipにしてくれる機能があるのでそれを使えばすぐにできます。
自分のサイトを作って公開する
どうせ公開するなら自分のサイトを作って公開してみましょう。ゲームを作れば作るほど自分のサイトがどんどん良くなっていくので楽しいですよ。
ただ、検索エンジンの対策をしないとほとんど人に見てもらえないという問題もあるんですが。。
サイトの作り方についてはこちらに書いています ▷ ゲームを自分のサイトで公開しよう！
どんどんJavaScriptでブラウザゲーム作ろう！！
とりあえずざっくり解説してみましたがどうでしょうか？
説明が下手であちこちチンプンカンプンかもしれませんがとりあえずサンプルプログラムをいじくり倒して遊んでみてください。
おかしくなって直せなくなったらまたファイルをダウンロードしてやり直せばいいんで、気にせずぐちゃぐちゃに改造しまくって遊んでください。やってればそのうちいろいろわかってきます。
何となくわかってきたら「こんなことできるのかな？」というのをどんどん試してどんどん作ってください。とにかく作ることが一番上達するし、上達するとどんどん楽しくなります。
もしどうしてもわからないことなどあれば私のtwitterかこのサイトの問い合わせフォームからでも連絡してください(‘ω’)ノ
★PixiJSについてもっと知りたい方はこちらの記事もどうぞ
