メインコンテンツへスキップ
見出し画像

みんなでいっしょにコーラを振ろう!「COLA BREAK: SHAKE & SHOT」を公開しました!

    こんにちは、こぐわらです。
    今回はゲームジャムへの初参加です。
    コーラを振って防衛するゲーム
    「COLA BREAK: SHAKE & SHOT」を公開しました!
    【ブラウザ版】

    コーラを振って泡で防衛、豆を集めてコーヒーを飲んで一息つく、そんな感じのゲームです。
    よかったら遊んでみてください!

    ゲーム説明

    画像

    タイトル画面です。右上のボタンで言語設定と音量設定ができます。
    スタートゲームをクリックしてゲームを始めてください。

    画像

    ゲーム画面です。上のメニューは左からスコア、圧力、体力、キャップの状態、コーヒー豆の数です。
    マウスカーソルの位置に合わせて照準が動き、左クリック長押しでコーラを発射します。

    圧力が減るとコーラの出が悪くなります。そんな時は、マウスを上下に動かして、圧力をためましょう。
    キャップを開けるのに時間がかかるので、クリック連打はあまり有効ではないです。

    敵は飛行機と羊がいて、飛行機は素早く飛んできて、羊は遅いけど体力が多いです。

    敵からたまにコーヒー豆がドロップして、マウスカーソルを近づけると回収します。
    5つ集めると、右クリックでコーヒーブレイクができます。

    画像

    コーヒーブレイク画面です。一息ついて休憩しましょう。
    おまけでコーラの圧力が100%まで回復します。
    コーヒーブレイク画面で表示されるイラストは5枚の中からランダムになっています。

    画像

    ゲームオーバー画面です。
    RESTARTボタンでゲームに戻れます。
    SHARE ON Xボタン、MISSKEYボタンでスコアをシェアできます。
    みんなでスコアを競い合いましょう。
    SAVE IMAGEボタンで、GAMEOVER画面の画像を保存できます。シェアのお供にどうぞ。

    説明は以上です、よかったら遊んでみてください!

    ーーーーーーーここから裏話ーーーーーーー

    ここからはこのゲームの製作の裏話です。

    構想

    このゲームは、Itch.ioで開かれるAIゲーム開発ジャム、
    Ultimate AI-Powered Game Jam #1に向けて作りました。

    6月16日時点で公開されていたテーマはコーラだったため、まずはコーラのゲームについて構想を固めていきました。
    ・コーラと言えば炭酸と圧力
    ・ゲームジャムの期間が3日
    ・遊んでもらって評価を付けてもらうシステム
    この3点で、カジュアルに遊べるアクションゲームがいいかな、となりました。

    次に、アクションとなると操作感がゲームに連動していたら嬉しいなと思ったので、マウスを動かしてコーラを振るというのを思いつきました。

    圧力の変動が視覚的に表現できたら面白いなと思ったので、横向きのシューティングで、放物線を描く弾を考えました。

    そして、以前T1さんのゲームを遊んだ時に、Xでシェアする機能があって、このゲームに相性良さそうな気がしたので搭載する事にしました。
    ゲームも面白いのでお勧めです。

    7月3日までの準備期間で、それぞれの技術について実装可能かどうかの確認を行いました。

    第2のテーマ、コーヒー

    7月3日になり、ゲームジャムが始まり、第2のテーマが公開されました。
    第2のテーマは・・・コーヒー・・・
    飲み物以外が来ると思っていたので完全に想定外でした。

    画像

    第2のテーマは適当に敵とか背景とかにすればいいだろうと思っていたので、コーラ防衛ゲームだとだいぶ厳しいテーマです。かける液体はコーラに決めてますし、飲み物被りで実装しにくい・・・

    10分ほど考えてゲーム中にコーヒーブレイクできるようにする事にしました。

    画像

    といってもいつでもコーヒーブレイクできる感じだとただのポーズと変わらないので、コーヒー豆を5つ集めてコーヒーブレイクって仕組みにしました。

    ゲームの組み立て

    ゲームの形がだいたい決まったので、Antigravityへ指示を出します。

    ・コーラを振って泡を飛ばして防衛するゲームを作ってください。
    ・コーラを左下に配置し、重力がある感じでコーラが放物線上に飛ぶかんじにしたいな
    ・斜め右上を向かせてください。操作中はマウスのある位置を向く感じにしたいです。
    ・もうちょっと飛ぶ勢いを強くしたいな、空から飛んでくる敵も倒したいし
    ・敵は斜めに飛んでくるんじゃなく、左へ真っすぐ進む感じにしたいな、
     地面を歩く敵と空を飛ぶ敵みたいな感じで
    ・操作説明の表示と敵の位置がかぶって見えなくなります。
     操作説明は公開ページに書こうと思うので、ゲーム内には不要かな。
    ・マウスのクリックを連打する戦法が強すぎます。
     振るのと飛ばすのの間にディレイを入れたいな、キャップの開け閉めみたいなイメージで

    って感じで指示を出してゲームを形作っていきます。

    ・ゲームジャムの第二のテーマがコーヒーなので、
     ゲーム中にコーヒーブレイクできるようにしようと思います。
    ・敵から低確率でコーヒー豆がドロップして、5個集めて右クリックでコーヒーブレイク
     って形でいきたいです。
    ・時間スローモーションではなく、完全に時間が止まって画面もコーヒーブレイク画面になって、
     休憩できるようにしたいです。
    ・コーヒー豆の回収は時間経過で消えちゃうものをクリックで回収と、
     自動回収とどっちが良いですか?それぞれメリットデメリットを考えてください。
    ・カーソル吸着にしましょう。回復効果はどうしようか、
     圧力は再開時に混乱しないように100%まで回復した方がいいと思うけど、
     HPを回復しちゃうとコーヒーブレイクが義務化してちょっとイメージと違います

    って感じでコーヒーの要素を組み込んでいって・・・

    ・飛んでる敵を倒した時のコーヒー豆は地上まで落ちてくるようにしましょう
    ・コーヒー豆の数は数字じゃなくコーヒー豆のアイコンの数で表示した方が分かりやすいと思う
    ・タイトル画面を作ってください。

    細かい所を修正していきます。

    次に、タイトル画面、ゲーム画面、コーヒーブレイク画面、ゲームオーバー画面と、画面推移が何度かあるので、そこにコーラやコーヒーが注がれる演出をいれます。

    ・画面推移時に飲み物が注がれていくような演出を入れたいです。
     タイトル画面からゲーム画面はコーラ、コーヒーブレイク画面はコーヒー、
     コーヒーブレイク解除時はコーラ、ゲームオーバー時はコーヒーにしようか
    ・画面推移が一瞬すぎます。飲み物だと認識できません。
     もっとリッチで気持ちいい感じでいきたいです。
    ・もっと画面推移ゆっくりで良いかも、でもだいぶよくなったよ
    画像

    画面推移コーラver

    画像

    画面推移コーヒーver

    細かい所を修正していって・・・

    ・上にあるUIがタイトル画面でもゲームオーバー画面でも出っ放しになってる。
     あとコーヒーブレイクの説明文がちょっと見切れてる
    ・あとOPENING○○%の時にUIが崩れるから"OPENING"って表示だけでいいかも
    ・キャップの状態によってUIががくがく動くのが気持ち良くないです。
    ・コーヒーが二段になっちゃってかっこ悪いです。
     あと、画面推移中の液体よりUIが前面に表示されて浮いています。
     画面推移の液体より背面になるようにしてください。
    ・タイトル画面で上部UIが表示されてしまっています。
     タイトルでは表示しないようにしてください。
    ・・・

    マウスが画面外に行ったときにAIMが外れるのが不愉快なので修正してもらいます。

    ・マウスが画面外に行ったときに操作できないのがちょっとストレスです。
    ・ちょっと質問なんだけど、これだとゲームページに埋め込みだった時に
     周りの操作できなくなっちゃうかな?クリックして全画面表示でプレイするゲームになる感じ?
    ・うーん、挙動を確認したいな、二つそれぞれ再現して触らせて
    ・埋め込み時の動作を確認したいから、偽物のWebページに埋め込んだものを起動する
     batファイルを作ってほしい。あと、INPUT MODE: CANVASは採用しないから、
     埋め込みに完全対応するための安全対策の有無を切り替えできるようにして
    ・INPUT MODE: WINDOW、FOCUS SAFETY: ONで確定でいきましょう。
     一時的に作った余計なものを無くしてください。

    次にUIを整えます。

    ・ここらでUIを本番用に変えたいです。5案程作ってタイトル、ゲーム画面、コーヒーブレイク画面、
     ゲームオーバー時のスクリーンショットを撮影して見せてください。
    ・ゲーム全体のUI(タイトル、ゲーム、コーヒーブレイク、ゲームオーバー画面)を5案、
     実際に構築してください。
    ・5のOrganic Craft Cafeで行こうと思う。でもちょっと2点気になるところがあります。
     飛ばしている泡が背景と被って見えにくいです。
     あとShare on misskeyが文字が枠からはみ出しています。

    現状のカフェっぽい、ノートのページっぽい落ち着いた雰囲気のUIが出来上がりました。

    ここらへんでAntigravityの5時間のトークン上限に引っかかったのでいったん休憩します。

    画像

    アセットの作成

    だいたい形になってきたので、アセットの作成に入ります。まずはアセットのリストを作成してもらいます。

    ・BGMとSEと画像を用意しようと思います。
     作る必要があるもの一覧と解像度をリスト化してください。
     コーラは男の子が手に持って振って傾けて噴射するみたいにする予定ですので
     差分と動かす部分も考えてリスト化してください。

    アセットリストが出来上がったのですが、思ったより多くて圧倒されます。

    画像

    モチベーションが下がったのと夜遅かったのでいったん寝る事にしました。

    次の日の朝、モチベーションを上げるため簡単そうなのからやっていきます。
    まずは敵画像、と、そういえば敵をどんなのにするか決めていませんでした。
    ゲームのサブテーマを勉強にしたいので、勉強を邪魔する遊びの誘惑と睡魔を敵にしようと思いました。
    飛んでくる敵は遊びの誘惑の紙飛行機

    画像

    地上の敵は睡魔の羊です。

    画像

    どちらもnanobanana2で生成しました。
    動きを付けたいのでちょっと傾けたAとBの画像を作成しました。

    画像
    A:上向き
    画像
    B:下向き

    次は簡単そうなBGM
    sunoで簡単に作りました。言語を入れたくないのでボーカルは無しって指示してます。

    続けてSE、ElevenlabsのSound-Effectsで作りました。
    簡単に思い通りのSEが作れて満足度高いです。

    次はコーラの空きペットボトル、これもnanobanana2で作りました。

    画像

    そしてゲーム画面のプレイヤー画像、Stable Diffusionで作って行きます。

    画像

    状況に合わせたプレイヤー差分

    画像
    画像
    画像

    可動する腕部分

    画像

    タイトル画面、ゲームオーバー画面

    画像
    画像

    そしてコーヒーブレイク画面、これは5つ用意してランダムに表示されるようにしました。

    画像
    画像
    画像
    画像
    画像

    次にタイトルロゴ、いくつか作った結果これに決めました。

    画像

    タイトル画面の背景、ゲーム画面の背景、コーヒーブレイク画面の背景は、AIに提案されていたのですが、ごちゃついて要素が見にくくなるだろうと思ったので作らないことにしました。
    ゲームオーバー画面だけちょっと寂しかったのでコーヒーの染みが付いた背景を作ります、手書きです。

    画像

    これでだいたいアセットは作り終わりました。
    だいたい7月4日の19時くらいです。

    コーラボトル部分の作成

    コーラボトルを振る感じを描写したかったのと、コーラボトルにコーラが溜まっていく感じを作りたかったので、指示していきます。

    ・プレイヤーとコーラボトルを別々の画像にして、コーラボトル画像が上下に動いたり、
     傾いたりする感じにしたいな。でもコーラボトル自体にゲージに対応したコーラが
     溜まっていく描写と泡を表示したいんだ
    ・コーラを振る時はボトルはマウスカーソルに対して90度上を向いていて、
     噴出させるときはマウスカーソルを向く感じにしたいな
    ・コーラを振る時の挙動が上を向いて回転するだけになっていて思っているのと違います。
     回転中心を左にずらして、上下に振ってる感じにしたいです。
     コーラ自体の向きはマウスの90度上向きで、Θ位置はマウスと同じ向きって感じにしたいです。
    ・シェイクのブレは上下ではなく回転中心を左にずらしたΘ方向って感じです。
    ・あと、プレイヤーキャラを描画したいので、その分右にずらしてください。
    ・位置は良い感じなのですが、回転中心をもっと左にしたいです。
     キャラクター画像の中心くらいがいいです。
    ・振る時は良いのですが、噴出させるときにキャラクターと被る位置に来てしまいます。
     噴出させるときも振る時と同じくらいの位置で、回転中心も振る時と同じくらいの位置にしたいです。
    ・上に向けたときに泡の吹き出す位置とコーラの位置がずれます。
    ・コーラの中身の位置がずれてるのと、敵がちょっと小さすぎるな
    ・コーラの中身が細すぎます。
    ・コーラの下から中身がはみ出しています。あと、もっと上の方までコーラが溜まってほしいです。
    ・おしいです、あとちょっとだけ底を上げてください。
    ・腕をコーラと一緒に動かしたかったので、player_armという画像を追加しました。
     これを腕の位置に設置してコーラの角度と同じように動かしたいです。
    ・噴射するときは良い感じです!ですが振る時の位置が上になっています。
     前までの右側の位置で振りたいです。
    ・コーラの下部分を持つんじゃなく、真ん中ぐらいを持ちたいかな。
     あと腕画像をもうちょっと回転中心寄りにしたいです。
    ・噴射するときの持つ位置はもうちょっとだけ下がいいかな。
     -25pxくらい?肩位置はもうちょっと下にしたいです。y=-10くらい?
    ・コーラを振る時にplayer_shake.pngとplayer_idle.pngが何度も入れ替わってチカチカします。
     ちょっと切り替わるのにディレイを設けてください。
    ・マズルフラッシュの黄色のスパークがコーラのイメージに合わないな、
     白のスパークだけにしてください。
    画像
    画像

    だいたいコーラ部分は完成しました。

    BGM、SEの調整

    次にBGMとSE周りを改善していきます。

    ・コーラの吹き出し音が何度も重なってうるさくなっています。重ならないようにしてください。
    ・ゲームオーバーやコーヒーブレイクへの推移時、発射音がちょっと残っています。
     画面推移と同時に音が途切れてほしいです。
    ・コーヒーブレイク画面からゲーム画面に戻った時に、BGMがコーヒーブレイクのままになります
    ・飛んでる敵から被弾したときにもSEを流してほしいです。


    レイアウトの調整

    タイトル画面のレイアウトを調整していきます。

    ・タイトル画面にプレイヤーキャラを表示したいので、"assets\img\player\tytle.png"を追加しました。
     左側にこのキャラを配置して、メニューを右に寄せて良い感じに整えたいです。
    ・タイトルとハイスコアは中央にして、キャラクターをもうちょっと小さくしたいな。
     右側エリアの右の余白が窮屈だから、全体的にもうちょっと左に寄せて、
     あと中央もちょっと余白ができてるからつめたい
    ・スタートゲームも中央下部にあったほうがいいな
    ・タイトル画面でコーヒーブレイクにコーヒー豆が5個必要ってのが分かるようにしたいな
    ・言語がESの時、タイトルの文字がはみ出ています。
    ・サブタイトルが二重になってしまっています。
     あと、サイズと位置を調整したいので、デバッグボタンを追加してください。
    ・logoX: 123, logoY: 62, logoW: 608, logoH: 141です。
    画像

    ゲームオーバー画面のレイアウト調整

    ・ゲームオーバー画面にプレイヤーキャラを表示したいので、
     "assets\img\player\end.png"を追加しました。
     タイトルと同様に、左側にこのキャラを配置して、メニューを右に寄せて良い感じに整えたいです。
    ・キャラの左右に余白があるのを確認してください。キャラをもうちょっと小さくして左寄せにして、
     タイトルとゲームオーバーは真ん中に、その他のメニューはもうちょっと真ん中寄りにして、
     Shere on misskeyの文字が枠からはみ出さないようにしてください。
    ・配置のバランスが悪いです。この画像を見て整えてください。
    ・位置調整を行いたいので、ゲームオーバー画面にデバッグボタンを追加してください。
     デバッグ画面でキャラクター位置、タイトル位置、メニュー位置を
     それぞれ動かせるようにしたいです。
    ・メニューサイズも拡大縮小できるようにしてください。
    ・charX: 3, charY: 173, charSize: 375,
     titleX: 397, titleY: 156, goY: 115,
     menuX: 550, menuYOffset: -72, menuScale: 1.45
    ・SAVE IMAGEのボタンがリスタートボタンと同じ模様なのがちょっとイメージと違います。
     デバッグボタンと同じ見た目にしてください。また、位置が確定しました。
     charX: 13, charY: 175, charSize: 367,
     titleX: 391, titleY: 156, goY: 105,
     menuX: 537, menuYOffset: -94, menuScale: 1.30
    ・ゲームオーバー画面にも、タイトルと同じような方眼を入れたいな
    
    画像

    コーヒーブレイク画面のレイアウト調整

    ・"assets\img\player"にcoffee_break_1.png~coffee_break_5.pngを追加しました。
     コーヒーブレイク画面で、この5枚からランダムに一枚を表示するようにしてください。
     また、これも位置調整が必要になると思うので、
     デバッグボタンをコーヒーブレイク画面に追加してください。
    ・キャラクターだけじゃなくここら辺も動かせるようにしてください。
    ・テキストの横幅がちょっと大きいです。また、テキストのサイズも調整できるようにしてください。
    ・Title Size,Subtitle Size,Status Size,Resume Sizeと別れてるとちょっと大変だから、
     まとめて何%で調整できるようにしてほしいな
    ・charX:40, charY:124, charSize:396,
     textX:615, titleY:223, subtitleY:305,
     statusY:384, resumeY:464, textMaxWidth:288, textScale:0.90
    画像

    SNSでシェア周りの修正

    次にSNSでシェアする機能を調整していきます。

    ・SNSでシェアする際、ゲームオーバー画面も添付するようにしてください。
    ・Ctrl+Vしたけど貼り付けできないな、あと投稿文に
     💡 ゲームオーバー画面がコピーされています!貼り付け [Ctrl+V] で画像添付できます!
     を入れるのはやめたい
    ・あ、でもシェアボタンを押したら勝手にダウンロードされるのはユーザーに親切じゃないかも、
     画像をダウンロードボタンを別で追加したいな。

    音量設定の追加

    ディスコードで配信してみたら音量が気になったので、音量調整を追加します。

    ・音量設定をタイトル画面に追加してください。
    ・タイトルとちょっと近くて嫌です。あとトグルで50%にできないのも嫌です。
     スライドバーの方が直感的に操作できて好ましいです。
     音量アイコンのボタンを設置して、クリックしたらスライドバーで調節できるようにしてください。
    ・言語設定と横並びではなく一段下にずらしてほしいです。
     あと、100%の時につまみと文字がかぶるので、文字を右にずらしてください。

    その他の修正

    最後に細かい所を修正しました。

    ・白背景に白い敵なので、ちょっと見えにくいです。
     黒い縁取りや影を用いてもうちょっと目立たせてください。
    ・桜井政博のゲーム作るを参考にブラッシュアップしたいです。計画を立ててください。
    ・難易度アップがちょっと主張が強すぎます。
    ・難易度アップの頻度が高いかな、今の3分の1くらいにしたい
    ・うーん、白い座布団(バックプレート)がちょっと微妙です。
     strokeText と他の描画シャドウの重複の白い部分を大きくする感じで
     上手く文字が縁どられるようにしてください。
    ・言語設定を入れようと思うんだけど、シェアするときだけ言語設定できるようにするのと、
     タイトル画面で言語を変更できるようにするのどっちがいいかな?
    ・対応言語は英語、日本語、中国語、スペイン語にしたいです。デフォルトは英語にしてください。
    ・このゲーム、難易度設定ってどうなってるかな?時間経過で徐々に難しくなっていく?
    ・実際に時間経過やレベル上昇に合わせて敵のスピードや出現率を上げたいです。
    ・うーん、時間経過でレベルアップは要らないかな、スコア3000ごとのレベルアップだけにしたいです。
    

    Itch.io用にビルド、デプロイ

    Antigravityにビルドを指示します。

    これで完成なので、itch.io用にビルドしてください。

    ついでに紹介文を書いてもらったけど、全然だめだったので書き直します。
    しかし、プレイしてみると画像とBGMが読み込まれず・・・
    前作の時の知見を与えて改善を試みます。

    ・画像とBGMが読み込まれません。"\itch_tools"を参考に、ビルドを改善してください。

    それでもだめだったので、段階的なロードを実装します。

    ・404が出てます。おそらく、一度に沢山読みだそうとしすぎなのではないでしょうか?
     段階的なロードを採用してみてください

    ついでにBGMの音質を128kbpsに落として軽量化します。
    ゲーム容量は11MBになりました。

    それでも解決しないので、一度チェックを行います。

    1. ファイル名の大文字・小文字がズレている(一番多い原因)、
    2. パス(場所)の指定が「絶対パス」になっている、
    3. ZIPファイル化するときの「階層」が間違っている、
    が大丈夫か確認してください。

    原因の切り分けを行う為テスト用のZIPを作成します。

    ・原因の切り分けを行いたいので、テスト用のZIPを作成してください。
     また、itch_toolsの知見のなかで行っていない物が無いかチェックしてください。

    ここで原因が判明。
    根本原因:html-classic.itch.zone CDNはサブフォルダ内のファイルを配信できない仕様でした。
    ルート直下にアセットを配置して解決しました。
    (これStall Questでも同じこと起きてitch_toolsに引継ぎ書かせたはずなんだけどな・・・)

    ゲームのページを作って、完成です!

    画像

    何度目でもゲームを公開する瞬間ってのはわくわくするものですね。

    シェア機能不具合の対応

    公開できたのでシェア機能が正しく動くか確認・・・してるうちに友達が遊んでくれました!

    画像

    URLが・・・!!おかしい!!!
    https://koguwara.itch.io/cola-break-shake-shotじゃありません!
    ゲームの配置されてるURLをシェアする形で実装していたので、おそらくそこが悪さをしています。
    修正します。

    ・シェア時のURLをhttps://koguwara.itch.io/cola-break-shake-shotに固定にしてください。
    ・最新状態にしたけど、シェア時のURLが
     https://html-classic.itch.zone/html/18205762/index.html?v=1783180156 になってるよ、
     強制的にhttps://koguwara.itch.io/cola-break-shake-shotになるようにしたいんだ
    ・ん?シェア時のリンクは直接リンクになっちゃうの?文字列として
     https://koguwara.itch.io/cola-break-shake-shotを利用して何とかできないかな?

    これで無事https://koguwara.itch.io/cola-break-shake-shotがシェアされるようになりました。
    それぞれの言語、それぞれのSNSで正しく動くことを確認して・・・

    画像

    これで無事完成です!

    最後に

    そんな感じで無事完成して公開してゲームジャムに参加もできました!
    開催期間は72時間ですが、27.5時間で完成しました。短いゲームで確実に作り上げる事を目指していたのですが思ったより短時間で完成しました。

    使ったAntigravityのトークンは70%程・・・思ったより消費したので、今後ゲームジャムに参加する場合には同じくらいのボリュームで作る事になるのかな。
    おそらく試行錯誤で無駄にトークンを消費してる部分が大きいと思うので、ここは自分がレベルアップしていけば改善できそうです。

    良かった点は、テーマと親和性が高く、かつ面白いゲームが出来上がった所だと思います。プレイフィールに拘ったので、そこがしっかりと満足感を生み出せてると思います。
    シェア機能もしっかりと機能してて、友達がたくさん遊んでシェアしてくれてます。
    ゲームデザインも良くできたと思います。難易度は徐々に上限無く上がっていくので遊ぶ人に合わせた難易度になりますし、苦手な人から得意な人までみんな楽しめます。スコアのシェアでエンドコンテンツもありますし。

    反省点としては、ゲーム画面のキャラクター、もっと動かせたかなって感じがします。食らったモーションとかもっと仰け反ったっていいし。
    コーラの画像もちょっとキャラクターと違うモデルで作られてるので浮いています。
    ゲームオーバー画面とコーヒーブレイク画面もテキストがちょっと単調かな、ここもタイトルロゴと同様に画像を作ってリッチにしてもよかったかも

    そんな感じです。
    最後まで読んでくれてありがとうございました!
    またね!


     
     
    こぐわらです。 趣味でAIで男の子の画像やゲームを作って遊んでます。 それらについての体験を書いていけたらなと思ってます。 気軽に読んで頂けたら嬉しいです! 祝 pixivフォロワー1.1万人 祝 Ultimate AI-Powered Game Jam #1、#3 1位

    あなたへのおすすめ