pixi.js+TypescriptでHTML5ゲーム作ろう!テンプレート公開!!

ゲーム作りたい!!

そう思う人はたくさんいると思います。

そして今始めるならやっぱり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氏に感謝して買いましょう。

▷▷▷ HTML5 ゲーム開発の教科書(Amazon)

そして上のリンクは当然のごとくアフィリエイトになっているので私にもおこぼれをあげましょう(わたしだってこのゲームエンジン作るのにすごい時間使ってるのでお金欲しいです。しかもわたし居酒屋でバイトしてるフリーターのおっさんなんで貧乏なんですよ。もうね、金が無くて無くて。だから金よこせ!だせよ!おらぁ!・・・・

 

というわけで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で作ってるときにずっと欲しかった機能なので一番最初に調べて作りました(´∀`)

 

他にもちょこちょこ改造してたりするんですが忘れました。本と違うところがあったら改造したところだと思ってください。

あとがき

テンプレートの使い方については別の記事に書いたのでそちらをお読みください。

▷▷▷ pixi.jsゲーム開発テンプレートの解説と使い方

このテンプレートで実際にゲームを作ってみた私の感想としては「enchant.jsより簡単。かつもっとすごいことができる」です。enchant.jsも素晴らしかったですがやっぱり新しい技術で作られたものはenchant.jsではできなかったことが簡単にできるようになっているので作っていて楽しいですね(´∀`)

 

もしこのテンプレートでゲーム作ったらぜひこのサイトにもリンク貼って欲しいです。お願いします(*’ω’*)

★自作テンプレートで作ったゲームがこちら

さめがめ

爆弾野郎

どのゲームで遊ぶ?

360度全方向から来る敵を撃ち落とすシューティングゲーム。
同じ色の宝石の数字を足してゾロ目や順目を3つ以上作って消すゲームです。
部屋に侵入してきた蚊と戦うカジュアルゲームです。現実同様好き放題飛び回る蚊をうまく叩い...
一つだけある空欄を使ってタイルを入れてマッチを作る落ちもの系パズルゲーム。ちょっと難しい。

コメント欄

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発