ポケモン風ゲームを作ってみた その2
これの続き
番外編
どんな感じで作っていったか、サンプルを用意したので、興味のある人は触りながらよんでほしい。右クリック保存。
http://www.samenohada331100.shop/blog/answer1/sample.zip
ダウンロードしようとするといかがわしい警告がなるかもしれないが決して怪しいものではない。
[サンプルの中身]
・game.html ゲームのアウトプット
・enchant.min.js お守り とりあえず置いとけばよい
・Script.js ゲームの中身
・ivi.png イーブイの透過png
・msg.png メッセージボックスの絵
・pika.png ピカチュウの透過png
・wazamsg.png 技を表示するときのボックス
・tobai.wav 等倍ダメージ音 ダダーン
[中を開いてみる]
とりあえず開いてみる
・メモ帳から開くでScript.jsを開く 画面左
・game.htmlを開く 画面右 (多分大きめに表示されるので拡大率をブラウザで調整してほしい)
[意味を解説]
いきなり意味不明な文字列がでてきてなにこれみたいな感じだが、大事なポイントは5点に絞られる。まずは説明したいと思う。
①(450,300)はゲームの領域。黒い部分の幅が450ピクセル、高さが300ピクセルになる。でかすぎるとスマホではみ出てしまうらしい。
②back.pngを読み込んでくださいという事務手続。
③背景をblack色にしてくださいという指示。redとかgrayとかwhiteとかいろんな色を入れれる。
④back.pngのサイズ。普通に画像の右クリックプロパティと同じサイズ(400,231)を入れておけばよい。
⑤back.pngの配置座標をあらわしている。(0,0)を指定しているので左上の隅に配置されている。
あとはゲームが動くようにしているおまじないで大きな意味はない。(消すと動かなくなるが。)要するにただ黒いキャンパスに画像を置いているだけだ。
[とりあえずいじる]
とりあえずいじってみよう。
①balckをgreenにする
②(0,0)→(25,35)にする
③メモ帳を上書き保存する。ショートカットCTRL+Sを使うとかっこいい
④ゲーム画面でF5を押し更新
①でgreenにしたことにより、背景が緑になった。HPバーが緑で満たされているが、回復したわけではなく、画像編集ソフトでバー部分を透過属性にしているから背景が透けて見えている。②で配置座標を変えたことによって、画面の真ん中に配置された。
[画像を置いてみる]
back.pngだけでは味気ないので他の画像も置いてみよう。
①Aをコピーし、下の画像の位置にペースト※
②Bをコピーし、下の画像の位置にペースト※
※改行の程度は問わないので、見やすい程度に改行すればいい
※インデント(行頭の左の空白)は画像のように周りと合わせてもいいし、合わせなくてもよい。
A
const tokiImgUrl = "toki.png";
game.preload([tokiImgUrl]);
B
const tokiImg = new Sprite(100, 100);
tokiImg.moveTo(100, 118);
tokiImg.image = game.assets[tokiImgUrl];
mainScene.addChild(tokiImg);
[画像の上に画像を重ねてみる]
先ほど追加した画像の上に、さらに画像を重ねることができる。要領は前項と全く同じだ
①Aをコピーし、下の画像の位置にペースト
②Bをコピーし、下の画像の位置にペースト
③メモ帳を上書き保存し、ゲーム画面をF5で更新
A
const pikaImgUrl = "pika.png";
game.preload([pikaImgUrl]);
B
const pikaImg = new Sprite(65, 65);
pikaImg.moveTo(120, 143);
pikaImg.image = game.assets[pikaImgUrl];
mainScene.addChild(pikaImg);
[画像のレイヤーの階層関係を入替える]
お絵かきソフトのように、画像の階層の上下関係を入れ替えることができる。
①下記添付画像に従い、先ほど追加した節の記載順序を入れ替える
②メモ帳を上書き保存し、ゲーム画面をF5で更新
どういう結果になるかは、君の目で確かめてくれ！
つづき かみんぐすーん・・・
答えをカンニングする →http://www.samenohada331100.shop/blog/answer1/index.html
