Calmery.me

みっかぼうずにならないようがんばる

JavaScriptによる2Dゲームプログラミング入門

これは #sMeeting の「初心者向けハンズオン JavaScript による 2D ゲームプログラミング入門」で使用する記事です.

タイムテーブル

15:00 ~ 16:10 JavaScript 入門
16:10 ~ 16:40 HackforPlay
16:50 ~ 18:00 2Dゲームプログラミング

果たして 3 時間で終わるのでしょうか...!終わらなかったらごめんなさい!

1. JavaScript 入門

ここでは 2D ゲームを作る上で必要となる最低限の知識を勉強します.時間の関係上,ここがメインになりそう.なんとなく理解してもらえればいいです.

JavaScript とは

名前だけ見ると Javaそっくり.でも違うんです.JavaScript という名前は Java の人気にあやかって付けられた名前なんです.便乗したかったんです.
元々は Web ブラウザ上で動く言語でしたが近頃は調子に乗ってますね.3D ゲームから GUI アプリケーションまでなんでも作れますし,Unity での開発にも利用できます.C 言語などと違い制限が緩く,かなり書きやすい言語です.やりたいことがあるが C 言語などでは挫折しちゃったよという方も JavaScript ならいけるかも.

JavaScript を利用した面白そうなデモです.なんちゃって VR もできたりします.
parallax.js
three.js - Javascript 3D library
A-Frame – Make WebVR

必要な知識

では早速.まず今回のプログラミングを行う上で以下の内容を理解する必要があります.

  • 変数,代入
  • 条件分岐
  • 繰り返し

と言ってもなんとなくわかればいいです.やっているうちに慣れます.

Hello World !

文字の表示から.Hello World と出力してみます.
まず Create a new fiddle - JSFiddle を開きます.JavaScript の欄(左下)に以下のように入力し RUN で実行します.

console.log("Hello World");

f:id:calmery:20160612040947p:plain
コンソールに Hello World と表示されたら成功です.

コンソールの開き方ですが F12 を押すと JavaScript コンソールのようなものが開きます.
Google Chrome
f:id:calmery:20160612041246p:plain
FireFox
f:id:calmery:20160612041333p:plain

変数

まずは変数です.

x = 10
y = 2x + 3

このとき x は 10 であり y が 23 であることがわかると思います.ではこれを JavaScript で書くとどうなるのか.こうなります.

var x;
var y;

x = 10;
y = 2 * x + 3;

JavaScript では 2 かける x を 2x と表すことはできません.不便ですか?諦めてください.これを見ると似ているということがわかると思います.

JavaScript において変数の定義は次のように行います.最後にセミコロンがあることに注意が必要です.

var 変数名;
変数名 = 値;

初めにある var とは何か.これは変数の宣言です.宣言とは?となりますが「この文字を変数として使うからそこのところいい感じによろしく」という意味です.まあ,変数を使うときはちゃんと宣言して使おうねっていう決まりごとだったり.

あと,変数名は何も x とか y とかじゃなくていい.こう書いてもいいです.

var number;
var result;

number = 10;
result = 2 * number + 3;

f:id:calmery:20160612025911p:plain
C 言語や Java の経験者であれば型がないこと以外は変わらないので理解が早いかなと思います.未経験の方は「何かしらの値にわかりやすい別名をつけるんだな」くらいの理解で大丈夫です.では変数への代入ができるようになったので簡単な計算をやってみます.

// 変数を宣言する
var n1;
var n2;

// 変数に値を代入する
n1 = 10;
n2 = 5;

// 計算する
console.log( n1 + n2 ); // 足す
console.log( n1 - n2 ); // 引く
console.log( n1 * n2 ); // 掛ける
console.log( n1 / n2 ); // 割る
console.log( n1 % n2 ); // 余り

ひとつずつ見ていきます.まず「+」はそのまま足し算を行います.「n1 + n2」の場合,n1 が 10,n2 が 5 を表しているので n1 + n2 は 15 となる.ただそれだけです.後もだいたい同じです.「*」は掛け算,「/」は割り算,「%」はあまりの計算になります.

また,計算結果を新しい変数に格納したりもできます.

var n1;
var n2;
var result;

n1 = 10;
n2 = 5;

result = n1 * n2;

// n1 * n2 の結果を表示
console.log(result);

変数はただ値に別名をつけるだけでなく計算結果の保持などに使うことができるということです.ちなみに数値だけでなくいろいろな値を代入することができます.文字列はクオーテーションである「"」か「'」で囲みます.囲ってあったらどんな値でも文字列です.数字も囲ったら文字列として扱われるので注意が必要です.

var text; 
text = "アイウエオ";

var numberLikeString;
numberLikeString = "123"; // 一見数値だが実際は123という文字列である

var num;
num = 10;

var result;
result = numberLikeString + num; // 結果は 12310 となり思ったような結果が得られない

f:id:calmery:20160612030315p:plain

ちなみに変数の宣言ですが,宣言と同時に初期値を代入できます.

var number;
number = 100;

と書いていますが,

var number = 100;

でも構いません.

条件分岐

JavaScript における条件分岐,まず条件の種類を見ていきます.

A == B // A と B は等しい
A != B // A と B は等しくない
A <= B // A は B 以下である
A >= B // A は B 以上である
A < B  // A は B より小さい
A > B  // A は B より大きい

これらは必ず真(true)か偽(false)を表します.正しいか正しくないかですね.

ちょっと例を見てみます.

10 > 3 // 10 は 3 より大きい,正しい
10 < 3 // 10 は 3 より小さい,正しくない

3 < 3 // 3 は 3 より小さい,正しくない
3 <= 3 // 3 は 3 以下である,正しい

3 == 3 // 3 は 3 と等しい,正しい
3 != 3 // 3 は 3 と等しくない,正しくない

var x;
var y;

x = 10;
y = 3;

x > y // x は y より大きい,正しい
x < y // x は y より小さい,正しくない

x == y // 変数 x の値と変数 y の値は等しい,正しくない
x != y // 変数 x の値と変数 y の値は等しくない,正しい

これら条件にしたがって分岐をおこない,プログラム中の処理を分けます.

if( 条件A ){
    処理B : 条件Aが正しいときの処理
} else {
    処理C : 条件Aが正しくないときの処理
}

f:id:calmery:20160612025211p:plain

例を紹介します.

var num;
num = 5;

if( num > 10 ){
    console.log("変数numは10より大きい");
} else {
    console.log("変数numは10以下である");
}

もうひとつ else if があるのですが,これは

if( 条件A ){
    条件Aが正しいときの処理
} else if( 条件B ) {
    条件Aが正しくなく,条件Bが正しいときの処理
} else {
    条件A,条件Bがともに正しくないときの処理
}

ということです.これも例を見てみます.変数 num を用意し,3 で割り切れる場合には「3の倍数」と,5 で割り切れる場合には「5の倍数」,3 でも 5 でも割り切れない場合は「割り切れない」と出力してみます.

var num;
num = 9;

if(num%3 == 0) {
    console.log("3の倍数");
} else if(num%5 == 0) {
    console.log("5の倍数");
} else {
    console.log("3でも5でも割り切れない");
}

変数 num の値を変更して試してみてください.

繰り返し

プログラムには繰り返し文というものが存在します.変数の値を変更しながら同じ処理を行う場合などに有効な手段です.
以下に例を示します.

var num;
num = 0;

num = num + 1;
console.log(num);

num = num + 1;
console.log(num);

num = num + 1;
console.log(num);

num = num + 1;
console.log(num);

num = num + 1;
console.log(num);

数値を 1 から 5 まで出力するプログラムですが,

num = num + 1;
console.log(num);

の部分が繰り返されているのがわかります.5 回くらいならいいですがこれが 100 回,1000 回となったらどう.コピペしますか?ありえません考えたくもないです.ではこの文に繰り返しを適用してみます.

while( 条件A ){
    処理B : 条件Aが正しいときの処理
}

f:id:calmery:20160612033351p:plain
例を見てみます.

var num;
num = 0;

while( num <= 5 ){
    num = num + 1;
    console.log(num);
}

はい,これだけです.while というのが繰り返し,while の横のカッコの中が繰り返しを行う条件です.今回の場合「変数 num が 5 以下の場合,num に 1 足してその数を出力する」と読むことができます.

条件分岐 if 文と書き方がそっくりですがこれは条件部分が偽(false)になるまでカッコの中の処理を実行し続けます.条件が偽(false)にならない場合は無限ループしてしまうので注意が必要です.

ちなみに for 文もあります.こちらの方が一般的ですがややこしくなりそうなので今回は割愛します.
もし知りたい方は for文-JavaScript入門 などを参考にされてください.わかりにくい場合,検索すれば記事が山のように出てきます.

FizzBuzz

ここまで勉強した変数,条件分岐,繰り返しを使用して FizzBuzz を書いてみます.

FizzBuzz とは数字を 1 ずつ足していき 3 で割り切れる数値の場合 Fizz と 5 で割り切れる数値の場合 Buzz と,3 と 5 の両方,つまり 15 で割り切れる場合 FizzBuzz と言う遊びです.これを実装します.

このように出力してください.

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

先ほど while 文を使用し 1 から 5 までの数値を出力しました.また条件分岐で変数の値のよって出力の内容を変更することができました.
このことから...

var num;
num = 15;

while( num <= 15 ){
    num = num + 1;
    if( num == 0 ){
        console.log("FizzBuzz");
    } else if( num%5 == 0 ){
        console.log("Buzz");
    } else if( num%3 == 0 ){
        console.log("Fizz");
    } else {
        console.log(num);
    }
}

できました.この辺でちょっと休憩.次はこれがゲームにどう生かせるのか,実際に遊びながら見ていきます.

2. HackforPlay

つまらない基礎の勉強がやっと終わりました.このセッションは休憩と思っていいです.
ここでは HackforPlay を使ってゲーム中,どのように学んだ要素が利用できるか見ていきます.
hackforplay.xyz

チュートリアルをプレイしますがマップの書き換えがあります.この知識はなくても書き換えることはできますが一応,まとめておきます.

配列

配列とは値を一列に並べたものです.一つの変数で複数の値をまとめて扱うことができます.

var values;
values = [A, B, C, D];

f:id:calmery:20160612012329p:plain

var values;
values = [A, B, C, D];

values[0]; // A
values[1]; // B

HackforPlay の 2D ゲームのマップには配列が使用してあります.X 軸,Y 軸が必要となるのでただの配列でなく,配列の中に配列を入れた二次元配列というものを使用します.この辺で「?」となりそうな予感がします.
f:id:calmery:20160612012843p:plain
この図だと分かりにくいですね.
f:id:calmery:20160612013316p:plain
これだと少しマップっぽい? A の値を取りたい場合まず横列を見ます.A があるのは 2 ですね.次に縦列,これは 1 です.よって A は values[2][1] で取得が可能です.えっ横列,左から 3 番目じゃんと思った方はその通り.配列ははじめ 0 から数え始めます.もう 1 でもいいのにね.

3. 2D ゲームプログラミング

まだ何もない状態からコーディングするのは難しいので,先ほどに続き HackforPlay を使って進めていきます.

まず HackforPlay に新規登録します.Twitter のアカウントを持っている方はそちらでログインしても構いません.
f:id:calmery:20160612023944p:plain
新規登録から進みます.順に沿って登録を行ってください.

登録が完了したら以下のページを開きます.
hackforplay.xyz

改造ボタンがあるのでクリック,オリジナルのゲームを作ってみます.
f:id:calmery:20160612024122p:plain
4行目,game.onload の左,三角矢印をクリックするとコードの編集ができます.

game.onload = function(){};

f:id:calmery:20160612024131p:plain
ここにアイテムなどのコードを追加していく,のところに右側からアイテム,キャラクターを選びコードを貼り付けてみましょう.
f:id:calmery:20160612024243p:plain
f:id:calmery:20160612024406p:plain
またパラメータ等をいじって調節,完成したら完成ボタンでアップロードできます.

この HackforPlay ですが enchant.js というライブラリを使用し書かれています.dotinstall に入門の動画がありますので JavaScript はある程度書けるとなったら初めから作る,一からコーディングするのも面白いと思います.
enchant.js - A simple JavaScript framework for creating games and apps.
http://dotinstall.com/lessons/basic_enchant_js_v2
ちなみに JavaScript のわかりやすい解説もあります.
http://dotinstall.com/lessons/basic_javascript_v2
これは 18 回くらいまでやれば良いかと.こんな記事よりわかりやすいので一から作ってみたい方は見ることをお勧めします.

お疲れ様でした

短い時間だったので急ぎ足になっていると思います.ごめんなさい.
質問等は TwitterCalmery (@calmeryme) | Twitter)などででもしていただければ.

良かったら活動の内容や感想など TwitterFacebook で #sMeeting というタグをつけて投稿してください.わかりにくいなどでもオッケーです.

時間があるときで構いませんのでアンケートの方も回答をお願いします.
アンケート締め切りました.回答ありがとうございました!

お疲れ様でした!