pixi.js+TypescriptでHTML5ゲーム作ろう！テンプレート公開！！
※追記
この記事はほとんど紹介文なので「さっさとテンプレートよこせや！」って方はこっちのページへ飛んでください。
どんなゲームを作ってるか気になる方はゲームページを見てください。少なくとも最新10作品ほどはpixi.jsで作っています。
▷▷▷ ブラウザゲーム一覧
————————————————–
ゲーム作りたい！！
そう思う人はたくさんいると思います。
そして今始めるならやっぱりUnity！
だと思います。ええ、私もそう思います。
だけどみんなunityじゃつまらないじゃん(´・ω・｀)
やっぱ「俺は違う道から成功してやるぜ！」みたいな尖がった奴も必要やん？
というわけで私はpixi.jsを推したいと思います(‘ω’)ノ
ブラウザゲームは金がかからんぞ！
個人でゲーム作ってる方の多くはUnityでスマホ用アプリを作っていると思いますがスマホでアプリを出すのってけっこう金かかるじゃないですか？
iPhoneで出すにはマックもいるし毎年のお布施もあります。
私のようにwindows＆androidユーザーにはiPhoneでアプリを出すのはかなり厳しい(´Д｀)マック買う金なんてねーよ！
しかし！ブラウザゲームならiPhoneだろうがandroidだろうがPCだろうが関係ない！！
無駄に金をとられる心配もない！
もう搾取される時代は終わるのだ！
pixi.jsでゲームを作るのは簡単なのか？
で、pixi.jsでゲームを作るのは実際どうなのか？簡単なのか？という疑問があると思います。
正直言って簡単ではないです(；´Д｀)
pixi.jsってゲームエンジンではないのでゲームを作ろうと思うと自分でいろいろ作らないといけないのよね。。
素人が一から作ろうとするのはかなり無理があります。
そこでおすすめなのがこちらの本！
TypeScript+Pixi.jsでのゲーム開発の基礎からすべて教えてくれている、まさにバイブルのような本です！
これを勉強すればpixi.js製のブラウザゲームが作れるようになります。
ただし！
くっそ難しい！！！！
これ、「ちょっとゲーム作ってみようかな？」と思ってる人向けではないです。プロ向けです(´Д｀)
素人が手を出すと最初の環境設定で挫けます(私も挫けかけた)。
pixi.js製ゲームエンジンテンプレート公開！
私は上記のバイブルをなんとか読み解き、サンプルプログラムを自分好みに改造し、ついにpixi.jsでゲーム開発が簡単にできる自作ゲームエンジンの開発に成功したのです！！(・∀・)ｻｽｶﾞ!ﾃﾝｻｲ！
そして心の広い私はそれを独り占めせずに皆さんに公開します！！
テンプレートはSmith氏のプログラムをベースにenchant.jsのような感じのミニゲーム向けのゲームエンジンに改造したものです。
ゲームエンジンの解説記事などはこれからこのブログに書いていきますが、「いや、俺はゲームエンジンのプログラミングを全部理解したいんだ！」という熱い方はSmith氏の本を購入して勉強してください。
というか基礎の部分はほとんど本の内容になっているので著者のsmith氏に感謝して買いましょう。
そして上のリンクは当然のごとくアフィリエイトになっているので私にもおこぼれをあげましょう(わたしだってこのゲームエンジン作るのにすごい時間使ってるのでお金欲しいです。しかもわたし居酒屋でバイトしてるフリーターのおっさんなんで貧乏なんですよ。もうね、金が無くて無くて。だから金よこせ！だせよ！おらぁ！・・・・）
というわけでsmith氏と私に感謝してGithubからソースを取得してください(´∀｀)
▷▷▷ pixi.jsゲーム開発テンプレート(Github)
ちなみにとりあえず公開はしたもののGithubの使い方が全然わかっていないので誰か教えてください（；^ω^）
テンプレート用に改造・追加した点
テンプレートはsmith氏のプログラムをenchant.js風のミニゲーム開発向けに改造したものです。なので基本部分は「HTML5 ゲーム開発の教科書
私が改造した点・付け足した点は以下の部分です。
LoadingSceneでデータを一括ロード
smith氏のプログラムではシーンごとにロードするようになっていたんですが、私はミニゲームしか作らないので最初に一括してロードした方が扱いやすそうなのでLoadingSceneを作って一括してロードするように変更しました。
pushScene・popScene
ゲームにはポーズ画面やメニュー画面など一時的に上に表示するシーンが必要なのでenchant.js風にpushScene・popSceneを作りました。
InputManager
パソコンのキーボードでも操作できるようにInputManagerを作りました。方向入力とボタン3つ(A、B、Start)を使うことができるようになっています。
Config.tsでいろいろ変更できる
先のことを考えて設定を変えやすいようにしておきました。画面サイズやキーボードのボタンなどはここを変更するだけでOKです。コンフィグ画面とか作るとかっこいいかも（作ったことないけど）
モザイクフィルター
スーパーファミコンみたいなモザイク処理でフェードイン＆アウトをできるようにしました。enchant.jsで作ってるときにずっと欲しかった機能なので一番最初に調べて作りました(´∀｀)
他にもちょこちょこ改造してたりするんですが忘れました。本と違うところがあったら改造したところだと思ってください。
あとがき
テンプレートの使い方については別の記事に書いたのでそちらをお読みください。
このテンプレートで実際にゲームを作ってみた私の感想としては「enchant.jsより簡単。かつもっとすごいことができる」です。enchant.jsも素晴らしかったですがやっぱり新しい技術で作られたものはenchant.jsではできなかったことが簡単にできるようになっているので作っていて楽しいですね(´∀｀)
もしこのテンプレートでゲーム作ったらぜひこのサイトにもリンク貼って欲しいです。お願いします(*’ω’*)
★自作テンプレートで作ったゲームがこちら
同カテゴリー記事
記事の感想・コメント
※コメントはまだありません※