今年もクリぼっちなので２日で作ったクソゲーを晒す


# できあがったクソゲー

できあがったブツ(音が出るので注意)
https://teradonburi.github.io/santa/index.html

避けゲーです。始める前に事の経緯を読むとクソゲーを倍楽しめると思います。
ちなみに技術的にすごいものはあまりないかもしれません・・・
どちらかというと限られた時間内に自分の持てる能力で実現するにはどうしたらよいかというのを試行錯誤したことを書きました。

<img width="802" alt="スクリーンショット 2018-12-10 0.16.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/3950bc9a-5baf-7ab4-2e82-55d183bdbae8.png">
タイトル画面はそれっぽい感じにしました・・・

# 事の経緯

[JSフレームワーク(またはライブラリ)× ビアバッシュ 初心者勉強会](https://sakeganaito.connpass.com/event/108628/)にて[最速でサービスをローンチする](https://qiita.com/teradonburi/items/c53160d91ea9f1fa47cf)をLTさせてもらいました。

最速でローンチすると書いてある以上、当日中になにか作ってローンチせねばと思い、１人ハッカソンを決行しました。
移動とかもろもろの関係で着手し始めてからのスケジュールがこんな感じです。

14:25 スケジューリング(5分)
14:30 お題目決定
14:40 アイディア出し、調査、設計
15:00 開発
16:00 リリース
16:30 終了（17:00から勉強会がある都合上）

時間が限られているため、時間制限をかなりタイトに決めました。

## お題目決定
時期的にクリスマスぽいものを作りたいなと思ったので
クリスマスのイメージなんだろうってキーワードベースで洗い出してみました。

・チキン
・ツリー
・ケーキ
・シャンパン
・クラッカー
・ボードゲーム
・サンタ
・雪
・教会
・イエス・キリスト
・暖かい感じ
・木製
・暖炉
・煙突

キーワードを並べていく中でサンタさんが煙突から降りてプレゼントを配りに行くゲームとか面白そうと思い
・タイミングが悪いと暖炉の炎で燃えちゃうのでタイミングをあわせて降りる
・一定時間内にサンタさんがプレゼントを配る回数を競う
みたいにドリルダウンしていきました。
→本当はこの辺でプロトタイピングとかユーザテストすると良さげ

## アイディア出し、調査、設計
このタイミングでゲームのロジック（ルール）と登場人物と必要な素材、技術選定が入り混じって大変でした。
ただし、このタイミングで何を削るか、もしくは何を使うかの検証が一番重要で後の工数に響く部分だと思いました。

配れるもの：
- チキン
- ケーキ
- シャンパン
- クラッカー
- プレゼント箱
→結局、プレゼント箱のみにした（後で拡張可能だと思った）

背景：
木製ぽい家（木の机、別途、木の椅子、ツリー）、煙突、暖炉
→結局工数の関係で暖炉だけにした

登場人物：
子供、サンタ
→結局、子供は出さなかった。お題目としてはプレゼントを配るということが伝われば良い

ゲームの状態：
1. 開始
2. 降りてるタイミングモード
制限時間内にタイミングをあわせて降りる
・操作はクリックのみの簡単操作
・画面クリックを１回押す→降りる
・降りきる前に画面クリックの２回目を押す→キャンセルして上に戻る（結局tweenにしたのでこの案は不採用）
3. 制限時間が来たら終わり

素材：
サンタ
トナカイ→不採用
寝ている子供→不採用
暖炉→不採用
煙突→不採用
ソリ→不採用
プレゼントボックス→サンタに持たせておけばニュアンスは伝わるはず

設計：
・github→静的なコンテンツでAPI不要なのでGitHub Pagesで十分
・JSライブラリ：[pixi.js](http://www.pixijs.com/)、未経験だけどなんか２Dだと枯れてそうだし、楽そうなので決めた
・yieldで状態制御：[JavaScriptでゲームシナリオを快適に実装する（デモ有）](https://qiita.com/townewgokgok/items/925b7024ff6dd204c770)
→結局使わなかった

## 開発

1. リポジトリ作成
2. pixiJSの導入
3. 使いそうなサンプルの洗い出し、検証

検証で時間がかかりそう、もしくはその時点で実現困難だと思った場合は不要なものが何か再度考えたり、
別のライブラリ等を使うことも視野に入れます。

## リリース

LTまでに結局タイトルの画面までしか間に合わなかったのでお蔵入りにしようかと一瞬考えたのですが、
（LT用のスライドのサンプルは別に準備していた）
お酒も入っていましたし、LT時に誤って見せてしまったので、その場でやると言ってしまいました。
２日かかってしまった理由はまぁ、そういうわけです・・・

# 敗因
リリース周りに関しては事前に色々調べていたため、これでも余裕があるとタカをくくっていました・・・
主な敗因は以下の２つです。

1. pixi.js周りの知識の不足
→ メジャーなライブラリだとしても未経験のライブラリは使い方の調査に時間がかかる。実際にやってみて必須だと思われる機能の調査に絞ったのですが、やはりドキュメントを探したり、検証に時間がかかりました。時間がない場合は自分のスキルセットに合わせた設計やお題目に変更することが大事だなと思いました。
2. 欲しい素材（特に画像）が足りない
→ これは割と切実だったりします。最初はマップチップを使って表示しようと思ったのですが、そもそも画像探すのと今回は見せ方を変えることで色々工数を削減できました（結果としてタイミングというゲーム性の根幹の部分は保たれたと思います）
とはいえ、ゲームメインの画像を探したり、加工するのに半日費やしてしまいました・・・

# なにか言い残すことは？
ゲーム内の暖炉の炎が出るタイミングはランダムです。炎のエフェクトアニメーションは画像の関係と実装に時間かかりそうなので略してます。
リズムゲームとか音楽ゲームみたいにシーケンスを出そうと思ったのですが時間的に力尽きました。

![o0350038514206691123.jpg](https://qiita-image-store.s3.amazonaws.com/0/55077/5db510b5-b78b-f6f5-cced-62112b52883a.jpeg)
燃え尽きたぜ真っ白にな・・・

本質からずれている無駄なものを見極めて極力削ぎ落としましょう。
工数も削減できるし、余計な情報がなくて伝えたいことが伝わるはずです。
（伝わらないぞって方はマサカリ投げてください、投げ返します）
<img width="320" alt="d10bf31b2dba8126929ae117cec0eca6.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/a57e21da-b3ae-a1cd-3ffc-f25c44198654.png">

根暗だと思われるかもしれませんが、一人ハッカソンは案外おすすめです。

- 限られた時間でアウトプットを出すことを求められる（だらだらしない）
- 自分の中で作りたいと思ったものでも、実現しようとしたときに自分の思ったより自分のスキルで何が足りていないか気づくことができる
- 目標を達成するために無駄なものに気づくことができる
- そもそも目標の達成困難さに気づくことができる（目標の見直しも視野に）
- 案外できちゃったときは素直に喜べばよいと思います

自分を見つめ直す上でも時間内にやりたいことが達成できるか試しにやってみることが大事だと思いました。

ちなみにクリぼっち限定で弊社でクリスマスパーティーやるようなのでもしクリスマス予定がありませんでしたら弊社が燻します。よろしかったらどうぞ（宣伝）
https://www.wantedly.com/companies/meetsmore/post_articles/146337