はじめに
クソアプリアドベントカレンダー、6日目担当のサンジモニカです！
去年に続き、2回目の参加です。
去年は「とてつもない汚いゲーム」を作ってしまったので、その反省を活かして今年は制作に取り掛かりました。
何を作ろうか
せっかくなら多くの方に遊んでほしいと思い、今年流行ったマリトッツォを題材とすることにしました。
見た目も可愛いしアイコン的にも使えるし、最適なモチーフでした！
流行ってくれて感謝！
ゲームの説明
そんなわけでマリトッツォゲームというものを作りました。
ルールはシンプル。マリトッツォをスワイプしてお皿のところに運びましょう。
ハムスターに当たってしまうと失敗です！
全10面のステージクリア型です。ぜひ遊んでみてください！
仕様検討について
ゲーム制作に当たって考えた企画的な要件について、以下の記事にまとめました。
企画要件、ゲームデザイン（ルール）、ターゲットユーザー、難易度設定などについてまとめています。
技術的な話
以下の環境で開発しました。
- PixiJS
- Webpack
- TypeScript
- HTML/CSSを少々（デザイナーに任せたい部分はHTML/CSSで実装）
- Firebase Hosting
WebpackとTypeScriptは以前から導入したかったので、今回始めて本格的に使用しました。大変便利でした！
Firebaseも今年習得した技術です。サーバーレス環境最高……。
その他、 PixiJSとハムスターの動きについて、以下で少し詳しく解説しようと思います。
Pixi.JS
2DレンダリングができるJavaScriptライブラリです。
https://pixijs.com/
今回のゲームがなめらかな移動が必要なブラウザゲームということもあり、いろいろとライブラリを探していた中で見つけました。
勤めている会社でも使用しており、多少聞き馴染みがあったので今回採用しました。
使い方については、とてもわかりやすい記事がありました。
使ってみた感想ですが、大変良かったです！
もともとHTML5での開発はほとんどしたことがなかったのですが、それでもほぼ迷うこと無く開発ができました。
ハムスターの動き
お邪魔キャラクターであるハムスターの動きにもこだわりました。
滑らかで連続的に動くことと、自由に移動経路を定義できることを条件としていたのですが、なかなか上手くいかず何度か作り変えることに……。
最終的には、SVGでパス（経路）を定義することにしました。
以下、コードの抜粋です。
// パスの定義部分
static line_rightUp = new RoundTripSVG(SVGType.PATH, 'M 0,0 T 100 -100');
static circle = new RoundTripSVG(
SVGType.PATH,
'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0'
);
static wave = new RoundTripSVG(
SVGType.PATH,
'M 0,0 Q 100 -200 200 0 T 400 0'
);
// （中略）
// SVGの作成
this.svgPathElement = document.createElementNS(
'http://www.w3.org/2000/svg',
this.roundTrip.type
);
this.svgPathElement.setAttribute('d', this.roundTrip.path);
// 全体長の計算
this.totalLength = this.svgPathElement.getTotalLength();
// ・・・
// 全体長に対して取得したい点を%で指定し、座標を得る
var returnPosition = this.svgPathElement.getPointAtLength(
(this.totalLength * this.currentPercentage) / 100
);
SVGって画像描画以外にも使えるんですね。知りませんでした。
結果として、自由な曲線を定義してその上を移動させることができるようになりました。
最後に
今年も見事なクソアプリを作ることができました。
かねてより使いたいと思っていた技術の習得にもなり良かったです！
デザインはおしゃもこさんに担当していただきました。
今年も素晴らしいデザインをありがとうございます。ハムスターかわいい🐹
最後になりますが、Twitter(@SanjiMonica)でもいろいろとつぶやいていますので、よければフォローをお願い致します！
明日以降の皆様の素晴らしきクソアプリも楽しみにしております！