ウェブカツdeプログラミング学習2.5ヶ月目:あめあつめ2019制作秘話

2020 1/15
ウェブカツdeプログラミング学習2.5ヶ月目:あめあつめ2019制作秘話
目次

はじめに

みなさまこんにちは、もえかです。ウェブカツにおける二週間に一度のプログラミング学習記録ご報告ブログでーす!いぇーーーい!

ウェブカツってなあに?という方へ

オンラインで学習できるプログラミング学習サービスです。条件はありますが女性割引や学生割引などもありますよ!プログラミングはやってみたいけど難しそうだなーとか、プログラミングって敷居が高いよなーって方は、無料受講もできますのでぜひ一度調べてみてください。

画像

ウェブカツdeプログラミング学習0ヶ月目:ウェブカツって一体なぁに?

2019年7月29日
画像

ウェブカツdeプログラミング学習0.5ヶ月目:プログラミングが楽しくて仕方ない!

2019年8月15日
画像

ウェブカツdeプログラミング学習1ヶ月目:目&肩の疲れにお悩みの方へ

2019年8月31日
画像

ウェブカツdeプログラミング学習1.5ヶ月目:WEBサービス部のすヽめ

2019年9月15日
画像

ウェブカツdeプログラミング学習2ヶ月目:PHPエラーとの戦い方

2019年9月29日

PHPオブジェクト指向部アウトプット完成しました!

肝心のゲーム内容は可愛いモンスターをしばき回して飴を強奪するゲームです。ひでぇことしやがるぜ……

予想以上の反響を頂けて、嬉しい限りです。

こだわりポイント

製作するにあたって、こだわったポイント。前回のアウトプットとは違い、今回は公開して遊んでもらおうと思っていたので、細部までできる限りこだわってみました!

デザイン

ただプログラミング学習の一環で作るのではなく、どうせなら可愛いものを作りたい!と思い、私の心の奥底に眠る女子力を引きずり出してきました。また、10月中に絶対完成させる!と自分を奮い立たせるため、ハロウィンっぽいデザインにしました。完成が11月まで伸びたらもうえらいこっちゃですよ。※その時は多分「あめあつめ2020」にしてたと思います。時代を先取りする女。

セリフ

繰り返し遊びたくなるように、各モンスターに3種類のセリフを準備しています。また、元ネタを知っているとくすりとできるよう、ちょっとだけ仕込んでみました。

ゾンビ バイ○ハザード
フランケン wiki参照。多分思ってたのと違う
死神 BLEA○H(※最後までデスノートと悩みました)
見習い魔女 ハリーホ○ッター
謎なコウモリ ロザリオとバンパイア(CV:子安)

その他はオリジナル(?)です。ちなみに、それぞれ中々の反応をいただけましたが、コウモリだけは反応ゼロでした。さすがにニッチすぎたか……

レスポンシブ

できればTwitterで公開したかったので、レスポンシブ対応は必須でした。一応タブレットも対応しています。

Twitter連携

集めた飴の数をツイートして競争できたら面白そうだな〜と思ったので、ツイートボタンを設置して飴の数や「あめあつめ2019」というハッシュタグをツイートできるようにしました。また、それを合わせてTwitterCardも設定しました。

20191015−04

TwitterCardとは、赤枠内部のよく見るこれのことです。画像、タイトル、説明文、URLを設定することができます。これをするのとしないのではTwitterからの流入数が大違い……だと思うので、設定してみたいなーって方は「【2019年版】Twitterカードとは?使い方と設定方法まとめ」をご覧ください。

製作期間

WEBサービス部に比べるとコード・ページ共に段違いに少なかったので、なるべく早く仕上げようと考えました。そのため、デザイン〜完成までで4日(合計13時間)です。ジョバンニにはまだ届きませんね。

製作手順

ここからは製作手順をご紹介。

画像探しの旅

今回はイラストACさんで探しました。「ハロウィン」や「ゾンビ」と検索し、いくつか見比べました。その中で一目惚れしたsabazooさんのイラストをお借りしました!どれもこれもめっっっっちゃくちゃ可愛いので、ぜひ一度見てください!今回のアウトプットは、sabazooさんのイラストが使いたかったからあのデザインになったと言っても過言ではありません。一目見ただけで心の奥底に眠る女子力がくすぐられました。

デザイン

IllustratorかPhotoshopを使うか悩んだのですが、契約ほやほやで操作に慣れていないため、スピード感重視で慣れたAdobeXDを使用することにしました。(次回以降はPhotoshopを使用していきます)

イラストから色をスポイトし、とりあえずで作ったものがこちら。

20191015−01

ここまで作ってから、なんか……ちょっと画面がさみしいなーと思いまして。そこからセリフを別枠で追加することやプレイヤーの情報を表示することを思いつき、調整したのがこちら。

20191015−02

そしてタイトルを追加したり、攻撃ボタンと逃げるボタンを左右入れ替えたりと、微調整を繰り返し、最終的にこうなりました。

20191015−03

コーディング(PHP)

PHPオブジェクト指向部では記述量がかなり少ないので、1日かからないくらいで終わりました。地獄のWEBサービス部と比べてリアルに1/20くらいなんですが、オブジェクト指向という概念が厄介かもしれません。数学で言うところのサインコサインタンジェント感がすごい。プログラミングでは俺を乗り越えてからがスタートだぜ感。私はお前と戦った高校一年の数学を忘れない。

コーディング(HTML/CSS)

今回はCSS設計を意識して、BEM設計を取り入れつつSassを使って書いてみました。私自身初めて気づいたことなんですが、このあたりを試行錯誤するのが非常に好きなようでして、うきうきるんるんでやってました(笑)

以前購入した本を暇な時に読んでいたので、頭の中にふんわりと情報がある状態で始めました。

エディターはVSCodeを使っておりますので、VS CodeでScssを書くための環境構築方法を参考にしつつ、環境構築して挑みました!

あとは繰り返し作業

修正→チェック→修正→チェック……ひたすらこれの繰り返しでした。夢の中でもコード書いてたくらいにはずーっと考えてました。

公開したあとの感想

予想以上に反響がありました

遊んでツイートしてくださった方はもちろん、リプで褒めてくださる方もたくさんいらっしゃって、私は本当に嬉しかったです(作文)。

アウトプットしていつも思うことなんですけど、皆さんめちゃくちゃ褒めてくれます。自己肯定感がうなぎ登りです。あくまでアウトプットはプログラミング学習(および就職活動)の一環でやっていることなので、「人から褒められること」を目的にしてしまうと良くないとは思いますが、思わず目的にしちゃいたくなるくらい褒めてくれます。いつも皆さん本当にありがとうございます……

長所:早さ

リプをいただいた中で、早さについて褒めていただく内容が多かったです。自分で気づいていなかったのですが、これは面接時にアピールできる長所だ!と思いましたので、これからもDEX18目指して、意識して取り組んでいきたいと思います!

他人のアウトプットに反応できる人間でありたいと思った

「自分がされて嬉しかったことは他人にもする」の精神で、いいねを押すだけじゃなく誰かがアウトプットしてたらすぐさまリプ送るマンになりたいと思います。これを読んでくださっている方もぜひ、リプ絶対送るマンになってください……

さいごに

実はもう次のアウトプット(ポートフォリオ)が完成してしまったんですが、それについては次回書きますー!それでは、ここまでお読みいただいてありがとうございました!

この記事が気に入ったら
フォローしてね!

関連記事

目次