ゆっくりを出すツールの作り方
ニコニコ動画のRPGアツマールに投稿できるブラウザゲームの作り方を紹介していきます。
今回はHTMLとJavaScriptを活用してクリックした位置に好きな画像を表示させるだけの簡易なゲームを作成し、
RPGアツマールに投稿するまでを紹介します。
ゲームの完成例は以下のURLに公開しております。
https://game.nicovideo.jp/atsumaru/games/gm18243
HTMLの作成
まずはゲームプログラムを記述するためのHTMLファイルを作成します。
メモ帳や秀丸などのエディタを開き、以下のコード記述してください。
<!DOCTYPE html>
<html>
<body>
//ここにゲームプログラムを記述する。
</body>
</html>
コードを記述したら、名前を付けて適当な場所に保存しましょう。「index.html」という名前にしてください。
RPGアツマールでは「index.html」という名前のファイルを検索して実行します。また、拡張子をhtmlにすることで、
実行したときにブラウザで表示されます。もし、編集などでエディタで表示したい場合は右クリック→プログラムで開く
→使いたいエディタを選択しましょう。
保存が終わったら「index.html」を実行してみましょう。まだ、ゲームプログラムは記述していないので真っ白な画面が表示されます。
キャンバスの作成
ゲームの描写画面（キャンバス）を作成します。キャンバスは<canvas>タグを使用することで作成できます。また、<canvas>タグは作成するキャンバスの名前や範囲を設定することができます。先ほどの「index.html」に<canvas>タグを追加しましょう。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas> //追加コード
</body>
</html>
<canvas>タグ内の「id」は作成するキャンバスの名前、「width」は横の範囲、「height」は縦の範囲です。追加したら上書き保存をし、「index.html」を実行しましょう。キャンバス自体は透明であるため何も表示されていないように見えますが、左上あたりに作成されています。
JavaScriptの準備
JavaScriptを記述するために<script></script>タグを追加しましょう。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>//追加コード
//ここにJavaScriptする。
</script>
</body>
</html>
また、JavaScriptを記述するキャンバスの指定とJavaScriptのゲーム描写の機能を呼び出します。document.getElementById("キャンバス名")よりキャンバスを指定し、その情報をcanvasという変数を作って保存してください。そして、canvas.getContext("2d")より指定したキャンバスにゲームを描写する機能を呼び出し、ctxという変数を作って保存してください。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");//追加コード
var ctx = canvas.getContext("2d");
</script>
</body>
</html>
画像の読み込みと描写
完成例のようにゆっくり霊夢を読み込み描写してみます。まずは以下のURLから画像をダウンロードしてください。
https://commons.nicovideo.jp/material/nc23691
JavaScriptでは画像を読み込む際に同じフォルダ内にある画像ファイルを読み込みに行きます。そのため、適当な場所（ディスクトップとか）に「yukkuri_tool」というフォルダを作成し、その中に「index.html」と先ほどダウンロードした「nc23691.png」を移動してください。
フォルダ移動ができたら、読み込みと描写のプログラムを記述していきます。Image()に読み込みたい画像のデータを保存することができます。ここで、Image()のデータ構造をimgという変数に保存しましょう。Image()のデータ構造の中にあるsrcに読み込みたい画像の名前を入力することで画像の読み込みが行われます。先ほど保存したimgからsrcを呼び出し、画像を読み込みましょう。以下のようにコードを追記してください。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();//追加コード
img.src = 'nc23691.png';
</script>
</body>
</html>
続いて、画像を描写しましょう。画像の描写には以下の関数を使用しましょう。
描写するキャンバス.drawImage(読み込みたい画像のデータ構造, 横の位置, 縦の位置)
そして、drow()という自作関数を作りその中で上記の関数を呼び出し、
setInterval(自作関数, 自作関数を呼び出す時間（1m秒単位）)という関数を使って自作の関数を0.01秒ごとに呼び出すように設定し、画像を描写しましょう。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'nc23691.png';
//-----------------追加コード---------------------
function draw() {
ctx.drawImage(img, 100, 100);
}
setInterval(draw, 10);
//-----------------ここまで---------------------
</script>
</body>
</html>
これを起動すると以下のようにゆっくり霊夢が出現します。
クリックした位置に画像を描写する
クリックしたときに指定した関数の呼び出しが行われるイベントを活用します。以下のイベントを追加しましょう。
document.addEventListener("click", 呼び出したい自作関数, false)
そして、クリックした位置を取得するclickMoveHandler()という自作関数を作り、document.addEventListener()に設置します。クリック位置は変数x、yを用意し、そこに保存しましょう。保存したクリック位置をctx.drawImageの横の位置と縦の位置に設置することで、クリックした位置に画像が描写されます。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;//追加変数
var y = 0;
var img = new Image();
img.src = 'nc23691.png';
function draw() {
ctx.drawImage(img, x, y);//位置情報変更
}
//-----------------追加コード---------------------
document.addEventListener("click", clickMoveHandler, false); //自作関数clickMoveHandlerを設置
function clickMoveHandler(e) { //()の中にeを入れ、eにクリック位置情報が保存されるように設定
x = e.pageX; //pageX:横のクリック位置
y = e.pageY; //pageY:縦のクリック位置
}
setInterval(draw, 10);
//-----------------ここまで---------------------
</script>
</body>
</html>
上記のコードを追記し、実行すると以下の枠のようにクリックした位置にゆっくり霊夢が現れます。
実際に実行してクリックしてみた結果、クリック位置と少しずれた位置にゆっくり霊夢が現れました。また、現れたゆっくり霊夢が残り続けてクリックするたびに増えていきます。この問題を解決しましょう。
まず、出現位置のズレを解決します。ctx.drawImageで指定する位置情報は画像の左上を基準としています。このため、設置した縦と横の位置から画像の大きさの半分の縦と横の位置を引きましょう。これで画像の真ん中を基準に描写されます。
次にゆっくり霊夢が消えない問題を解決します。これはdrow()が呼び出されるたびに
ctx.clearRect(0, 0, canvas.width, canvas.height)によりキャンバスの描写を一回消し、再び画像を描写することで以前のクリック位置にあったゆっくり霊夢を消すことができます。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;//追加変数
var y = 0;
var img = new Image();
img.src = 'nc23691.png';
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);// 追加コード
//canvas.width:キャンバスの横の大きさ
//canvas.height:キャンバスの縦の大きさ
ctx.drawImage(img, x - 60, y - 45);// 60:画像の横の大きさの半分 45:画像の縦の大きさの半分
}
document.addEventListener("click", clickMoveHandler, false);
function clickMoveHandler(e) {
x = e.pageX;
y = e.pageY;
}
setInterval(draw, 10);
</script>
</body>
</html>
以上を追加することで、下枠のようにクリックした位置にゆっくり霊夢が現れます。
複数のゆっくり霊夢を描写する
完成例のように20体のゆっくり霊夢を描写できるようにします。先ほどはクリックするほどに無限に現れましたがここでは20体に制限し、さらに一定時間が経過したら消滅し、再び描写できるようにします。まずは配列によりゆっくり霊夢のデータの保存場所を20体分作りましょう。配列名はyukkuriそして、for文を使い20体分の配列を1つずつ呼び出して各配列に自作のデータ構造を設定していきましょう。
また、今後はクリック位置をyukkuri[呼び出すゆっくり霊夢の番号].x、yukkuri[呼び出すゆっくり霊夢の番号].xに保存しますのでこれまで使っていたx、yを上記に変更しましょう。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
var img = new Image();
img.src = 'nc23691.png';
//-----------------追加コード---------------------
var yukkuri = [];
for(var i=0; i<20; i++) {
yukkuri[i] = { x: 0, y: 0, status: 0, time: 0}; //yukkuriのデータ構造設定
//x: yukkuriの横の位置
//y: yukkuriの縦の位置
//status: yukkuriの状態（0:消滅 1:出現）
//time: yukkuriが出現している時間
}
//-----------------ここまで---------------------
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, yukkuri[i].x - 60, yukkuri[i].y - 45); //位置情報の変数を変更
}
document.addEventListener("click", clickMoveHandler, false);
function clickMoveHandler(e) {
yukkuri[i].x = e.pageX; //位置情報の変数を変更
yukkuri[i].y = e.pageY;
}
setInterval(draw, 10);
</script>
</body>
</html>
1回クリックしたらゆっくり霊夢を1体呼び出してクリック位置を入力できるようにしましょう。clickMoveHandler()内でfor文によりstatusが0のyukkuriを探し出し、見つかったらクリック位置を入力し、statusに1を入力します。そして、for文をbreakで抜ければ1体のゆっくり霊夢にクリック位置を入力することが可能となります。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
var img = new Image();
img.src = 'nc23691.png';
var yukkuri = [];
for(var i=0; i<20; i++) {
yukkuri[i] = { x: 0, y: 0, status: 0, time: 0};
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, yukkuri[i].x - 60, yukkuri[i].y - 45);
}
document.addEventListener("click", clickMoveHandler, false);
function clickMoveHandler(e) {
//---------------------追加コード--------------------------
for(var i=0; i<20; i++) {
if(yukkuri[i].status == 0){
yukkuri[i].x = e.pageX;
yukkuri[i].y = e.pageY;
yukkuri[i].status = 1;
break;
}
}
//----------------------ここまで--------------------------
}
setInterval(draw, 10);
</script>
</body>
</html>
最後に各配列のゆっくり霊夢を表示し、3秒後に消えるようにします。draw()内でfor文によりstatusが1のyukkuriを探し出し、見つかったらctx.drawImageで描写しましょう。これで各配列のゆっくり霊夢が表示されます。続いて、3秒後にゆっくり霊夢を消すためにdraw()が呼び出されるたびに描写中のyukkuriのyukkuri[i].timeを1カウントずつ増やします。draw()は0.01秒ごと呼び出されるため、300カウント後にstatusを0にすればゆっくり霊夢を消すことができます。このとき、yukkuri[i].timeのカウントも0に戻しておきましょう。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="768" height="432"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
var img = new Image();
img.src = 'nc23691.png';
var yukkuri = [];
for(var i=0; i<20; i++) {
yukkuri[i] = { x: 0, y: 0, status: 0, time: 0};
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i=0; i<20; i++) {
//------------------------------追加コード-----------------------------
if(yukkuri[i].status == 1){
ctx.drawImage(img, yukkuri[i].x - 60, yukkuri[i].y - 45);
yukkuri[i].time++;
if(yukkuri[i].time == 300){
yukkuri[i].time = 0;
yukkuri[i].status = 0;
}
}
//----------------------------------ここまで---------------------------
}
}
document.addEventListener("click", clickMoveHandler, false);
function clickMoveHandler(e) {
for(var i=0; i<20; i++) {
if(yukkuri[i].status == 0){
yukkuri[i].x = e.pageX;
yukkuri[i].y = e.pageY;
yukkuri[i].status = 1;
break;
}
}
}
setInterval(draw, 10);
</script>
</body>
</html>
これを実行することで完成例を再現することができます。以上でゲームは完成です。それでは、作ったゲームを投稿しましょう。
RPGアツマールへ投稿
これまでhtmlや画像ファイルを保存してきた「yukkuri_tool」フォルダをZIP形式に圧縮し、下記URLにアクセスし、ゲームファイルの項目に圧縮したフォルダを選択またはドロップしてください。
https://game.nicovideo.jp/atsumaru/game/edit/new
以下の画面のようになったら投稿完了です。あとはゲーム名などの必須項目を任意に入力してください。
