ポケモン風ゲームを作ってみた その3
これの続き
なんかプログラミング講座みたいになってしまったが、作り方を教えてほしいといわれたので、伝わるように書こうと思ったらこんな感じになった。続けてサンプルプログラムをいじっていきたい。
前の続きだが、一応前まで進めたやつを貼っておく。
http://www.samenohada331100.shop/blog/answer2/sample2.zip
今回は前回のやつに、バトル描写を追加して、ゲームっぽくしたい。
[音を鳴らす]
まずはtoki.pngを押すと攻撃音が鳴るようにしてみる。例のごとくA,Bをコピペして実行してみてほしい。
A
game.preload([toubai]);
B
{
game.assets[toubai].clone().play();
}
[2種類のイベントについて理解しよう]
イベントを発生させるには2種類ある。
1.ボタンを押すと発生するもの
2.自動的に始まり、常に実行し続けるもの
前項で実装したものは1であり、ボタンを押したら、tokioimg.ontouchedの{}に入っている音を鳴らす処理 game.assets[toubai].clone().play();が1回発生する。
2で同じ音を鳴らす処理をしたらどうなるのか考えてみてほしい。
わからない場合は実践してみよう。(音量注意)
①画像の赤□部分を消す
②Aをコピペ
game.assets[toubai].clone().play();
}
③メモ帳上書き、ゲーム画面更新
④ゲーム画面のどこかを触ってみる
[画像に動きをつけよう]
次に、ホルードがピカチュウを攻撃するようなアニメーションをつけたいと思う。
まずは単純にホルードを動かしてみる。ついでに、勝手になり続けるうるさい音は元に戻す。
①Aをコピペ
②Bをコピペ
ちなみに、tokiImg.x -=5; はtokiImgのx座標を-5してくださいという意味で、game.onenterframe = function () の{}内に入れることで、x座標を-5し続けるといった結果になる。要するに左にスライドする。
[決まった場所までストロークしたらストップさせよう]
さっきの実行結果だと、そのままスライドしていって終了してしまう。決まった場所にいったときにストップする感じにしてみたい。こういうときは、if文を使う。
以下をコピペ
{
tokiImg.x -=5;
}
こうすると、一定の位置まで来るとホルードが止まってくれる。
ホルードのx座標の初期値はtokiImg.moveto(100,118)の文で100であり、5ずつ減っていき、80未満になると、ifの条件を満たさなくなり、tokiImg.x -=5の処理が行われなくなるため、動きが止まるのだ。
[フラグと条件文を加えて、ボタンを押したら攻撃している感じにしよう]
つぎにフラグと条件文を加えて、ボタンを押したら攻撃している感じにしてみる。とりあえず書いてある通りにしてみてほしい。
①Aをコピペ
②Bをコピペ
③Cをコピペ
{
tokiImg.x = 100;
}
if(flag == 1)
{
④Dをコピペ
{
flag = 0;
}
}
この処理の説明をすると、①でフラグ管理用のflagを0にし、②でボタンが押されたらflagを1にする、③部分はflagが0か1の場合分けを行い、flagが1の場合は後ろに動かし、flagが0の場合はホルードを元のx=100に戻し突撃している風に動かす。といった感じだ。④はホルードが下がり切ったらflagを0に戻し突撃させているように見せる。
どういった結果になるかは君の目で確かめてほしい。
結果をカンニングする。
ポケモン風ゲームを作ってみた その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
ポケモン風ゲームを作ってみた その1
このポケモン風のゲームを作ってみた件について、製作の流れを書いてみようと思う
http://www.samenohada331100.shop/poke/
1.構想編 (1日目 / 3時間ぐらい考えた)
まずは、ゲームを作ろうと思った経緯と、最初に考えたことを書く。
きっかけは2020/11/21のこのツイートだ。
最初は好意的な印象を持ったが、tweetが埋もれていき、ほんとにやるつもりなのか疑いに変わり、一か月がたちなんだこいつって思った。
そして以下のようなコンセプトでゲームを作ろうと思った。
a)このシーンを使う
b)先に完成させてかみんぐすーん・・・をいじる
c)本人を登場させていじる
とにかくいじりを最大化するにはどうすればいいか考えた結果、以下の仕様を目指すことにした。
ⅰ)ポケモンの技と面接のよくあるアピールをつなげる
ⅱ)面接の質問と技を見れば答えが想像つくような感じにする
ⅲ)地雷っぽい技を置いて、間抜けな答えをさせて遊べるようにする
ⅳ)爆弾とかシュートとかショットとかスプラっぽい技を生かす
ホルードの覚える技をスマホのメモ帳に挙げていき、面接や本人の話にどうつなげるか考えた。なかなかでてこなかった。ⅱにあてはまるようなものがなかなか厳しく、結局ぎり関連性があるって感じになってしまったし、数もそんなにでなかった。
2.仕事編
仕事に追われながらも、うんちしに行ったついでにスマホを出して考えたり、通話募集ツイートにいいねを押したりしてた。
3.ググり編(2日目 / 2時間)
とりあえずゲームをどう作ったらいいかわからなかったので、WEB上で動く条件でググってみたら、良さそうなのが出てきた。
初心者でも2時間でブラウザゲームを作ってWebにアップしよう! | 作っちゃうおじさん制作記録
とりあえずjavascriptはスマホでも動くそうで、自分が趣味でやってきたC言語に近いし、動いてるゲームから自分の思った感じに作り替えろっていうスタンスがとっつき易かったのでこの記事に従って作ることにした。
4.メモリ買い編
しばらくパソコンをいじっていなかったためか、パソコンに付属していたウィルス対策ソフトの期限が切れていた。windowsに元から入っているウイルス対策ソフトに自動的に切り替わったのだが、メモリがめっちゃ食ってて使用率が90%近くになっていた。ダウンロード、インストールもままならない激重状態だったので、メモリを増設したら、ましになった。
5.画像集め編(3日目 / 4時間ぐらいかかった)
とりあえず、画像編集ソフトのGIMPを開いて、ツイートの画像からピカチュウとイーブイを切り抜いてみた。
切り抜いた部分は透明になってしまうので、周りの色で埋めて自然な感じにした。HPバーは透明で切り抜いて、後ろのレイヤーにHPバーを置くことにした。(HPバーそのものを伸び縮みさせるのはなんか難しそうに思えたので、減るときは単に左に動かすだけだけど隠れてるから縮んでるように見える感じになる)
以下の透過PNGをとりだした。
・背景
・イーブイ
・ホルード(ネットからとってきた)
・メッセージボックス
・技を表示するときのボックス。
6.とりあえずコードいじる編(4日目 / 3時間ぐらいかかった)
さっき紹介したたたき台のゲーム(キモイ象の絵が横から流れてくるのをタッチゲーム)
初心者でも2時間でブラウザゲームを作ってWebにアップしよう! | 作っちゃうおじさん制作記録
のコード を読んでみたが、正直よくわからんので、とっつき易いところから直していこうと思った。まずは、象のPNG画像をイーブイに置き換えてみた。これはそんなに難しくなくて、像のpngファイル名の文章が書かれているところを全部ivi.png(多分英語間違ってる)に差替えるだけだ。
次に、イーブイ画像の構文をコピペして、背景とピカチュウとメッセージボックスをいい感じの場所に配置してみた。これも大して難しくないが、配置をxy座標で指定しないといけないのでいい場所に置くには何度も「座標を指定→プログラム更新→配置をゲーム画面で確認→座標を再指定」を繰り返さないといけないので、めんどくさい。背景画像をペイントで開いてマウスポインターおけば座標出るじゃんって思ったけど、その時は思いつかなかった。
とりあえず、例のゲーム画面にイーブイが左から流れてくるよくわかんないやつができたので、「かみんぐすーん・・・」を添えた動画をfleetして寝た。
続き かみんぐすーん・・・
孵化乱数消費計算ツール:乱数消費ポン
●はじめに
ここでは拙作の孵化乱数消費計算ツールを紹介します。
1年近く前にツイッターで公開したものと内容は同じです。
アイコンがロトム図鑑になってます。
バグを取り除いたので動かなかった人は試してみてください。
ダウンロードはこちら
https://ux.getuploader.com/tkdpoke11/
ウルトラサンムーンが発売されて、乱数に興味を持つ人が増えてきましたね。
孵化乱数をするために、多くの人がこのツールを使っていると思います。
このSMHatchingRNGTool(もしくはPokemonSunMoonRNGTool)は欲しいポケモンの情報を入力すると消費数を教えてくれるとても便利なツールですね。
そして、私のツールと併用すると、孵化乱数をさらに早くラクに行うことができます。
●使い方
まず、SMHatchingRNGTool(もしくはPokemonSunMoonRNGTool)で目的ポケモンの消費数を求めます。
ここで連続孵化リストに消費数を入れるところですが、乱数消費ポンに入れますと最も早い方法を教えてくれます。
指示された通り、コイキング♂×コイキング♀等の同種孵化で消費してください。
同国籍、国際孵化のコイキングの組み合わせを準備しておくとよいでしょう。
(画像は開発中のものです)
生まれた順番に性格、性別、遺伝の情報がでてくれるので、生まれたコイキングを確認しながら消費すると確実です。
目標の一つ前で目的のポケモンを預けましょう。画像の例では消費195の呑気コイキング♂が生まれたら、コイキング♂×コイキング♀を引き取り、目的のポケモンを預けます。
●ダウンロード以降の流れ
・解凍します。
・SMHatchingRNGToolと同じフォルダに入れます。
・同封dllファイルも同じところに入れてください。
・x86とx64の二種類のexeがありますが動く方ならどっちでもいいです。(使わない方のexe、dllは消してもOKです)
●仕様
・400消費以上(PCスペックによる)の使用はおススメしません。計算量が上がり時間がかかります。200~300程度まで大まかに消費し、現在地を求めた後の使用を推奨します。
・↑どうしてもやりたい場合は大量消費にチェックを入れて使いましょう。計算時間が短縮されます。ただし、最適消費からはちょっと離れてしまいます。
・光るお守り有無しを間違えないようにしましょう。
・tsv未設定でもまあなんとかなります。(色違いが生まれる確率でズレが生じますが、その時は諦めるか、気になるならtsv求めましょう)
・くあんツールでseedを更新したら、seed再読み込みボタンを押してください。(×を押してもう一度開きなおしてもいいです)
・コイキングじゃない同種孵化の消費でもOKです。しかし、消費量が異なる場合があるので、わかんない場合はコイキングにしときましょう。
●質問
Q.私がやろうとしている消費がどうしても数千~万単位なので、こちらのツールで消費を抑えようと思ったのですが、入力すると4千に固定されてしまいます
今後、そういった大量消費に対応して欲しいです
A.実装する予定はありません。実装しても誰も使わないからです。理由の1つは、ツールで計算しなくても、国際孵化+赤い糸で目的値直前まで消費すればいいからです。その後ツールで最速を求めてもらえばいいと思います。2つ目は、何千行もある孵化リストを作っても誰も見ないからです。
●連絡
人脈が無く様々な環境下でのデバックや意見収集できていません。バグ報告・意見お願いします。
・ツイッター:https://twitter.com/tkdpoke111
・お題箱(匿名・アカウント不要・画像添付不可):https://odaibako.net/u/tkdpoke111
●ソース(開発者向け)
https://www.axfc.net/u/3864731/
dll:C++ vs2012
exe:C# vs2012
ぐちゃぐちゃ
7世代固定乱数針読みツール
どうもこんにちは。ここでは拙作の針自動読み取りツールを紹介します。
ダウンロードは以下
ver1.2(フレームレート調整つまみ付けました。QR針取るのが若干遅い対策です。たぶん)
https://ux.getuploader.com/tkdpoke11/
続きを読む