PixiJSを始めてみる
ゲームを作る
というわけで、ものは試しにゲームを作ってみようと思った。
エンジニアではないので、ナポリタンなコードにはなるわけだが、
2Dで作ろう → JavaScriptで作ろう → Canvasで作ろう
というところまでは来た。そして、作った。
シューティングゲームもどき
※黒…実機、黄…実機の弾、赤…敵、緑…敵の弾
タイトル → ゲーム画面 → ゲームオーバー(リザルト画面)までは作った。
(Canvasってそのまま図として保存すると、塗りつぶしとか保存できない？)
作ってみて思ったのは、
- ボタン1つ作るだけでもrectやらfillRectやら、当たり判定大変だった
- 最初からライブラリ的なの使うべきだった
- でも、ある程度作り方は分かった
という感じ。
PixiJSとは？
デザインを当て込まず簡単なループを作ってみて、このまま作り続けるのは非効率と感じたので、色々探してみると下記のページのスライドが非常に分かりやすかった。
HTML5 ゲームフレームワーク開発について【勉強会フォローアップ】 - Tech Inside Drecom
正体不明のエンジニアではなく、ドリコムというゲーム会社の人が書いているものだったので、信頼性はばっちりな気がする。
(よくあるエンジニアさんの記事は、備忘録的に書かれていることが多く、ゴリラの自分は理解が及ばない)
ちなみに、ドリコムはHTML5を使ったゲームのプラットフォームenzaの開発に関係しているみたい。
enzaといえばシャニマスが有名だけど、個人的にはfanzaの方が利用頻度が高い。
で、ざっくり書くと、2DならPixiJS、3Dならthree.jsというライブラリを使えばお手軽らしい。
使ってみる
というわけで、早速、PixiJSを使ってみようと思って、サイトにアクセスした。
からDOWNLOADを選ぶと、githubに飛んだ。
ゴリラには英語が良く分からないので、まとめるとPixiJSを使うには
- NPM Install … A
- CDN Install (via cdnjs) … B
の2種類の方法があるらしく、Aは自前でサーバーを用意しないといけないらしかった。
なので、簡単なBを選択。
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
これをhtmlに入れれば、使えるらしい。
※5.1.3の部分は、使いたいPixiJSのバージョンに合わせて変えないといけない。
そして、実際に使うとConsoleに↓のようなのが表示された。
多分、使えてる。
はてブロではソースコードとかをシンタックスハイライトで書けるみたいなので、徐々に整備しつつ、ナポリタンコードを載せてみたいと思う。
今日はここまで。
