Phaserで自機にジェット噴射を加えるサンプル

codepenでPhaserでプレイヤーの機体にジェット噴射をするサンプルを見つけました。パーティクルの画像が無くて表示がおかしくなっていますが、2Dシューティングゲームを作るときに参考にできそうです。

個人でゲームを作るときの無料素材 OPENGAMEART.ORG

openart

個人でゲーム作成する場合、プログラミング、絵、音楽すべてができる人はなかなかいません。Phaserゲームエンジンを調べていた時にこのopengameart.orgが使われていました。よくある素材集ですが、サイト上の検索で、ライセンスフィルターなどがあるので、もしかしたらお好みの素材が見つかるかもしれません。

 

ミニマリスト・テキストゲーム「暗い部屋」(A Dark Room)

doublespeakgames の極限までに情報を絞ったテキストベースのゲーム「暗い部屋」です。シンプルが故に、小説のように個人の想像の余地があり、ゲームを楽しめる一方、ゲームとは何かを考えさせられる作品です。また、ソースコードがgithubに全部公開されています。

http://adarkroom.doublespeakgames.com/?lang=ja

ソースコード

https://github.com/doublespeakgames/adarkroom

ゲームメカニックエクスプローラー(gamemechanicexplorer.com)

welcome

JavaScriptのゲームエンジンPhaser(ファイザー)を使ったゲームメカニックのソースコード集です。キャラクターを移動したり、ジャンプしたり、ダブルジャンプしたりと、ゲームで必要ないろいろな機能が載っています。

http://gamemechanicexplorer.com/

 

 

フラッシュゲーム 「艦砲射撃!甲・改」

日本のインディーゲームもたくさんありますが、シンプルで爽快なエフェクトで面白いゲームです。Chromeが今後Flashを廃止するようですが、その時はどうなってしまうのでしょう。

kanpo01

http://nextframe.jp/flash/bs.html

 

Moonstrider

Streamの動画をみるとローグライクのゲームで面白そうですが、公式サイトにアクセスできないのが残念です。月のまわりをぐるっと移動できて、ジャンプで別の星に移動できます。

Streamの評価を見るとレビューを書いてくれた方はみなよさそうな評価ですが、レビュー数が少なく何とも言えません。

http://store.steampowered.com/app/398250/?l=japanese

 

サボり方ガイド

インターネットを調べていたらサボり方ガイドというのを見つけました。

CIAのスパイマニュアルに学ぶ「会社をダメにする11の行動様式」

個人のゲームプログラミングとは全然関係ありませんが、「重要でないものの完璧な仕上がりにこだわる」というのは気を付けないといけません。

 

Unityの情報を集める

チュートリアル

2D Character Controller のチュートリアル

ブログ

パララックススクロール

TIPS

 

 

意外と簡単!Node Gardenを作ってみましょう!

 

node_garden

 

Node Gerdenは、白丸を線で繋いだアニメーションです。白丸をTwitterのアイコンにしたり、Youtubeのお気に入り画像を表示すれば、関係性を視覚化できたりします。複雑なようで実は簡単なのでProcessingで作ってみましょう。

以下ソースコードがたくさん書かれているように感じますが、修正前と修正後のソースコードをすべて貼り付けているためです。実際はコメントを含めて100行ぐらいで、簡単なので挑戦してみてください。

 

大まかな作り方を把握

  1. ノード(白丸)をランダムに表示します。
  2. 白丸が移動できるようにします。
  3. すべての白丸を線でつなぎます。
  4. ある一定の距離だけ線でつなぐように修正します。
  5. (応用)線をばね(スプリング)と考え、白丸の速度に変化を加えます。

ノードをランダムに表示します。

 

白丸が移動移動できるようにします。

ノードクラスに速度を表すxv(X座標のVelocity)とyvを用意して、描画毎にxy座標に足すことで移動します。また画面外に移動した場合は、反対側から出てくるようにします。例えば白丸が右側に進んで画面外になったら、左側からでてくるようにします。

 

すべての白丸を線でつなぎます。

node_garden02

ある一定の距離だけ線でつなぐように修正します。

node_garden03

ここまででほぼ完成しました。冷静に考えると2点の丸を好きな場所に表示して、それを移動するようにして、線でつなげるだけです。

(応用)線をばね(スプリング)と考え、白丸の速度に変化を加えます。

node_garden04

線を表示した場合は、少しだけ速度を変化させるようにしました。例えばx座標の距離dxが100ピクセルなら、係数0.0001を掛けて、0.001速度を加えます。値はかなり小さいのですが、1/60秒毎にこのメソッドが呼ばれているためかなりの効果があります。いろいろ係数を調整してみてください。

また、ノード間の距離が長くなると線が薄く表示されるようにアルファチャンネルを修正しました。

 

このコードでは、ばね効果でどんどんノードの速度が速くなってしまいます。vx,vyがある一定速度になったら、0.5に戻すなどの処置をすると綺麗になります。

応用

基礎のため白色の丸でしたが、別に画像ファイルでも問題ありません。そのため、TwitterアイコンやYoutubeのサムネイルでノードを作成して、関連が強いものは引き合うアルゴリズムなどを作ってみるとおもしろそうです。またノードの追加、削除、ノードをクリックしたときのエフェクトや、任意のノード間の最短経路など様々応用が可能です。

まとめ

インターネット上では日本語でもNode Gardenのサンプルはあるのですが解説が少ないので、ProcessingでNode Gardenを作ってその解説をしてみました。作る前はすごく大変そうと思っていたのですが、100行足らずで作成できたので拍子抜けでした。

お手軽Crayon Syntax Highlighter

インストール方法

WordPressにソースコードのシンタックスハイライトを導入するには、WordPressの管理画面から、Crayon Syntax Highliterをプラグインインストールするのが簡単です。SyntaxHighlighter Evolvedも検討しようとしましたが、プラグイン検索しても見つからなかったためこちらは若干面倒です。

設定

設定はとりあえず何もしなくて良いです。

使い方

WordPressの投稿エディタに”<>”ボタンが表示されるので、ボタンを押すと以下のようなダイアログが表示されてソースコードが貼り付けられます。右上の「挿入」ボタンで貼り付けられます。

 

add_syntax_hilight

まとめ

ソースコードハイライトを導入してみました。現在のWordPressは別途プラグインをダウンロードせずに、管理画面からダウンロードできるのでそれでインストールすれば楽です。アンインストールもすぐにできるので、とりあえず導入したい人にお勧めです。