読者です 読者をやめる 読者になる 読者になる

HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです

Phaser

Phaser

Phaser - Desktop and Mobile HTML5 game framework

モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク
Pixi.jsベースでCanvasWebGLレンダリングもサポート。

Tags: flash-like 2d sounds collisions physics typescript webgl free
cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js

Phaser Sites

Learn By Example

Tutorials



所感

めっちゃいい感じ。

全体観
学習
  • Lessmilk の Flappy Bird チュートリアルが Awesome.
  • 充実した公式サンプル集。現在 321
  • ほかに日本語の記事はあまりなさそうなのが心配。
    • でも js だからサンプルあればソース閲覧できるか
動作
  • iPhoneで動く!! 出先で人に見せられるのは重要
  • Features の DEVICE SCALING ってやつが気になる。良さそう。

    Phaser has a built-in Scale Manager which allows you to scale your game to fit any size screen. Control aspect ratios, minimum and maximum scales and full-screen support.

  • 何かしらサンプルを Play してみるとわかるが、ゲームからフォーカスを外したときに Pause する、など細やかな配慮が随所に感じられる
作りやすさ
  • ゲーム制作初心者であっても取っ付きやすい。実装は実現したいことにフォーカスした記述ができ、ライブラリ都合の冗長な記述が少ない印象
    • 音を鳴らしたいなら曲ファイルを最初に読み込んで、ジャンプする時に再生、みたいな2行で済む
    • 特に「How to make a Flappy Bird in HTML5 - Part 3」が役に立つ
    • Load → Menu → Play といったお決まりの遷移についての解説とソースコード。この流れに沿っているのなら、製作者はこれの実現に悩まなくて済む
  • メソッドチェーンですっきり書けて今どきっぽい
  • Phaser で学んでほかに移るコスト(無駄になるもの)少なそう
    • Lessmilk の人は一部のゲームを iPhone アプリに移植している模様。Swift も出てきたことだし、その準備にもなりそう

僕が Phaser についてまとめたものの最新はここで管理しています:

http://syon-wiki.herokuapp.com/Phaser

【追記】開発環境構築の記事を書きました:


ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

ゲームプログラミングのための HTML5 CANVAS入門

ゲームプログラミングのための HTML5 CANVAS入門