2021-01-10

ポケモン風ゲームを作ってみたその3

これの続き

ポケモン風ゲームを作ってみたその2 - うつくしそうげん

なんかプログラミング講座みたいになってしまったが、作り方を教えてほしいといわれたので、伝わるように書こうと思ったらこんな感じになった。続けてサンプルプログラムをいじっていきたい。

前の続きだが、一応前まで進めたやつを貼っておく。

http://www.samenohada331100.shop/blog/answer2/sample2.zip

今回は前回のやつに、バトル描写を追加して、ゲームっぽくしたい。

[音を鳴らす]

まずはtoki.pngを押すと攻撃音が鳴るようにしてみる。例のごとくA,Bをコピペして実行してみてほしい。

const toubai = "toubai.wav";
game.preload([toubai]); 

tokiImg.ontouchend = function()
{
 game.assets[toubai].clone().play();
}

f:id:takedpok:20210110024313p:plain

[2種類のイベントについて理解しよう]

イベントを発生させるには2種類ある。

1.ボタンを押すと発生するもの

2.自動的に始まり、常に実行し続けるもの

前項で実装したものは1であり、ボタンを押したら、tokioimg.ontouchedの{}に入っている音を鳴らす処理 game.assets[toubai].clone().play();が1回発生する。

2で同じ音を鳴らす処理をしたらどうなるのか考えてみてほしい。

わからない場合は実践してみよう。(音量注意)

①画像の赤□部分を消す

②Aをコピペ

game.onenterframe = function () {   
    game.assets[toubai].clone().play();
}

③メモ帳上書き、ゲーム画面更新

④ゲーム画面のどこかを触ってみる

f:id:takedpok:20210110025356p:plain

[画像に動きをつけよう]

次に、ホルードがピカチュウを攻撃するようなアニメーションをつけたいと思う。

まずは単純にホルードを動かしてみる。ついでに、勝手になり続けるうるさい音は元に戻す。

①Aをコピペ

game.assets[toubai].clone().play();

②Bをコピペ

    tokiImg.x -=5;  

f:id:takedpok:20210110030950p:plain

ちなみに、tokiImg.x -=5;　はtokiImgのx座標を-5してくださいという意味で、game.onenterframe = function () の{}内に入れることで、x座標を-5し続けるといった結果になる。要するに左にスライドする。

[決まった場所までストロークしたらストップさせよう]

さっきの実行結果だと、そのままスライドしていって終了してしまう。決まった場所にいったときにストップする感じにしてみたい。こういうときは、if文を使う。

以下をコピペ

if(tokiImg.x > 80 )
{           
    tokiImg.x -=5;  
}

f:id:takedpok:20210110032829p:plain

こうすると、一定の位置まで来るとホルードが止まってくれる。

ホルードのx座標の初期値はtokiImg.moveto(100,118)の文で100であり、5ずつ減っていき、80未満になると、ifの条件を満たさなくなり、tokiImg.x -=5の処理が行われなくなるため、動きが止まるのだ。

[フラグと条件文を加えて、ボタンを押したら攻撃している感じにしよう]

つぎにフラグと条件文を加えて、ボタンを押したら攻撃している感じにしてみる。とりあえず書いてある通りにしてみてほしい。

①Aをコピペ

let flag = 0;

②Bをコピペ

    flag = 1;

③Cをコピペ

    if(flag == 0)
    {
        tokiImg.x = 100;
    }
    if(flag == 1)
    {   

④Dをコピペ

        else
        {
            flag = 0;
        }
    }

f:id:takedpok:20210110034726p:plain

この処理の説明をすると、①でフラグ管理用のflagを0にし、②でボタンが押されたらflagを1にする、③部分はflagが0か1の場合分けを行い、flagが1の場合は後ろに動かし、flagが0の場合はホルードを元のx=100に戻し突撃している風に動かす。といった感じだ。④はホルードが下がり切ったらflagを0に戻し突撃させているように見せる。

どういった結果になるかは君の目で確かめてほしい。

結果をカンニングする。

http://www.samenohada331100.shop/blog/answer2/index.html

2021-01-08

ポケモン風ゲームを作ってみた　その2

これの続き

ポケモン風ゲームを作ってみたその1 - うつくしそうげん

番外編

どんな感じで作っていったか、サンプルを用意したので、興味のある人は触りながらよんでほしい。右クリック保存。

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 等倍ダメージ音ダダーン

f:id:takedpok:20210108002130p:plain

[中を開いてみる]

とりあえず開いてみる

・メモ帳から開くでScript.jsを開く　画面左
・game.htmlを開く画面右 (多分大きめに表示されるので拡大率をブラウザで調整してほしい)

f:id:takedpok:20210108003901p:plain

[意味を解説]

いきなり意味不明な文字列がでてきてなにこれみたいな感じだが、大事なポイントは5点に絞られる。まずは説明したいと思う。

①(450,300)はゲームの領域。黒い部分の幅が450ピクセル、高さが300ピクセルになる。でかすぎるとスマホではみ出てしまうらしい。
②back.pngを読み込んでくださいという事務手続。
③背景をblack色にしてくださいという指示。redとかgrayとかwhiteとかいろんな色を入れれる。
④back.pngのサイズ。普通に画像の右クリックプロパティと同じサイズ(400,231)を入れておけばよい。
⑤back.pngの配置座標をあらわしている。(0,0)を指定しているので左上の隅に配置されている。

あとはゲームが動くようにしているおまじないで大きな意味はない。(消すと動かなくなるが。)要するにただ黒いキャンパスに画像を置いているだけだ。

f:id:takedpok:20210108010305p:plain

[とりあえずいじる]

とりあえずいじってみよう。

①balckをgreenにする
②(0,0)→(25,35)にする
③メモ帳を上書き保存する。ショートカットCTRL+Sを使うとかっこいい
④ゲーム画面でF5を押し更新

①でgreenにしたことにより、背景が緑になった。HPバーが緑で満たされているが、回復したわけではなく、画像編集ソフトでバー部分を透過属性にしているから背景が透けて見えている。②で配置座標を変えたことによって、画面の真ん中に配置された。

f:id:takedpok:20210108013203p:plain

[画像を置いてみる]

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);

f:id:takedpok:20210108022458p:plain

[画像の上に画像を重ねてみる]

先ほど追加した画像の上に、さらに画像を重ねることができる。要領は前項と全く同じだ

①Aをコピーし、下の画像の位置にペースト
②Bをコピーし、下の画像の位置にペースト
③メモ帳を上書き保存し、ゲーム画面をF5で更新

const pikaImgUrl = "pika.png";
game.preload([pikaImgUrl]);

const pikaImg = new Sprite(65, 65);
pikaImg.moveTo(120, 143);
pikaImg.image = game.assets[pikaImgUrl];
mainScene.addChild(pikaImg);

f:id:takedpok:20210108024237p:plain

[画像のレイヤーの階層関係を入替える]

お絵かきソフトのように、画像の階層の上下関係を入れ替えることができる。

①下記添付画像に従い、先ほど追加した節の記載順序を入れ替える
②メモ帳を上書き保存し、ゲーム画面をF5で更新

f:id:takedpok:20210108024938p:plain

どういう結果になるかは、君の目で確かめてくれ！

つづき　かみんぐすーん・・・

答えをカンニングする →http://www.samenohada331100.shop/blog/answer1/index.html

2021-01-06

ポケモン風ゲームを作ってみた　その1

このポケモン風のゲームを作ってみた件について、製作の流れを書いてみようと思う

http://www.samenohada331100.shop/poke/

1.構想編 (1日目 / 3時間ぐらい考えた)

まずは、ゲームを作ろうと思った経緯と、最初に考えたことを書く。

きっかけは2020/11/21のこのツイートだ。

f:id:takedpok:20210105231444j:plain

最初は好意的な印象を持ったが、tweetが埋もれていき、ほんとにやるつもりなのか疑いに変わり、一か月がたちなんだこいつって思った。

そして以下のようなコンセプトでゲームを作ろうと思った。

　a)このシーンを使う

　b)先に完成させてかみんぐすーん・・・をいじる

　c)本人を登場させていじる

とにかくいじりを最大化するにはどうすればいいか考えた結果、以下の仕様を目指すことにした。

　ⅰ)ポケモンの技と面接のよくあるアピールをつなげる

　ⅱ)面接の質問と技を見れば答えが想像つくような感じにする

　ⅲ)地雷っぽい技を置いて、間抜けな答えをさせて遊べるようにする

　ⅳ)爆弾とかシュートとかショットとかスプラっぽい技を生かす

ホルードの覚える技をスマホのメモ帳に挙げていき、面接や本人の話にどうつなげるか考えた。なかなかでてこなかった。ⅱにあてはまるようなものがなかなか厳しく、結局ぎり関連性があるって感じになってしまったし、数もそんなにでなかった。

2.仕事編

仕事に追われながらも、うんちしに行ったついでにスマホを出して考えたり、通話募集ツイートにいいねを押したりしてた。

3.ググり編(2日目 / 2時間)

とりあえずゲームをどう作ったらいいかわからなかったので、WEB上で動く条件でググってみたら、良さそうなのが出てきた。

初心者でも２時間でブラウザゲームを作ってWebにアップしよう！ | 作っちゃうおじさん制作記録

とりあえずjavascriptはスマホでも動くそうで、自分が趣味でやってきたC言語に近いし、動いてるゲームから自分の思った感じに作り替えろっていうスタンスがとっつき易かったのでこの記事に従って作ることにした。

4.メモリ買い編

しばらくパソコンをいじっていなかったためか、パソコンに付属していたウィルス対策ソフトの期限が切れていた。windowsに元から入っているウイルス対策ソフトに自動的に切り替わったのだが、メモリがめっちゃ食ってて使用率が90%近くになっていた。ダウンロード、インストールもままならない激重状態だったので、メモリを増設したら、ましになった。

5.画像集め編(3日目 / 4時間ぐらいかかった)

とりあえず、画像編集ソフトのGIMPを開いて、ツイートの画像からピカチュウとイーブイを切り抜いてみた。

f:id:takedpok:20210106002646j:plain

切り抜いた部分は透明になってしまうので、周りの色で埋めて自然な感じにした。HPバーは透明で切り抜いて、後ろのレイヤーにHPバーを置くことにした。(HPバーそのものを伸び縮みさせるのはなんか難しそうに思えたので、減るときは単に左に動かすだけだけど隠れてるから縮んでるように見える感じになる)

f:id:takedpok:20210106002723j:plain

以下の透過PNGをとりだした。

・背景

・イーブイ

・ピカチュウ

・ホルード(ネットからとってきた)

・メッセージボックス

・技を表示するときのボックス。

f:id:takedpok:20210106003723p:plain

6.とりあえずコードいじる編(4日目 / 3時間ぐらいかかった)

さっき紹介したたたき台のゲーム(キモイ象の絵が横から流れてくるのをタッチゲーム)

初心者でも２時間でブラウザゲームを作ってWebにアップしよう！ | 作っちゃうおじさん制作記録

のコードを読んでみたが、正直よくわからんので、とっつき易いところから直していこうと思った。まずは、象のPNG画像をイーブイに置き換えてみた。これはそんなに難しくなくて、像のpngファイル名の文章が書かれているところを全部ivi.png(多分英語間違ってる)に差替えるだけだ。

次に、イーブイ画像の構文をコピペして、背景とピカチュウとメッセージボックスをいい感じの場所に配置してみた。これも大して難しくないが、配置をxy座標で指定しないといけないのでいい場所に置くには何度も「座標を指定→プログラム更新→配置をゲーム画面で確認→座標を再指定」を繰り返さないといけないので、めんどくさい。背景画像をペイントで開いてマウスポインターおけば座標出るじゃんって思ったけど、その時は思いつかなかった。

とりあえず、例のゲーム画面にイーブイが左から流れてくるよくわかんないやつができたので、「かみんぐすーん・・・」を添えた動画をfleetして寝た。

続き　かみんぐすーん・・・