Skip to content

Phaser

Phaser

Phaser - Desktop and Mobile HTML5 game framework

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

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

  • Documentation
    ドキュメント。各クラスのdocもある。
    • Phaser-dash-docset by rcolinray
      MacアプリのDash用Docset。
      dash-feed://https%3A%2F%2Fraw.githubusercontent.com%2Frcolinray%2Fphaser-dash-docset%2Fmaster%2FPhaser.xml
  • Support Forum
    フォーラム
  • phaser labs
    the playground and test site
  • Phaser Plugins
    "We are trying hard to keep the core of Phaser limited to only essential classes"
  • Phaser - Community - Phaser World Backissues
    Phaser World is our free weekly newsletter, published every Friday. It's a summary of all the new content added to the Phaser site over the previous 7 days. From new game releases to tutorials, videos, conferences, special offers and more.

Overview

How to Learn the Phaser HTML5 Game Engine - Tuts+ Game Development Article - What Platforms Can I Target With Phaser? - Desktop Browsers - Mobile Browsers - Firefox OS, Tizen, and Kindle - Native Apps and Desktop EXEs - It's Just Plain JavaScript - #TypeScript - Easy Asset Loading - Images - Sprite Sheets (fixed sized frames) - Texture Atlases (including Texture Packer, JSON Hash, JSON Array, Flash CS6/CC, and Starling XML formats) - Audio files - Data Files (XML, JSON, plain text) - JavaScript files (so you can part-load your games or JS based resources) - Tilemaps (CSV and Tiled map formats) - Bitmap Fonts - Rendering: WebGL and Canvas - Pixi.js - 2D webGL renderer with canvas fallback
Internally, Phaser uses Pixi.js for rendering. Pixi is a great, fast rendering library that focuses on Canvas and WebGL. - Sprite Lamp | Snake Hill Games
Dynamic lighting for 2D art - Audio: Web Audio and Legacy Audio - Input: Multi-Touch, Keyboard, Pointer, Mouse
You can define up to 10 touch points and track them all independently, using their events to handle Sprite interactions such as dragging, tapping, and collision. - Physics, Tweens, and Particles - can be swapped out for the likes of Box2D or p2.js. - A tweening system is also built-in, allowing you to tween objects or properties easily. - should the game pause, then all of your tweens will pause automatically and resume as needed. - Plugins
It is our aim that the core of Phaser will eventually settle down and hit a nice stable equilibrium, where we're not likely to touch it much beyond fixes and browser updates. - A great example of this is the recently released EasyStar path finding plugin (easystar.js)

Plugins

englercj/phaser-debug

Simple debug module for the Phaser game framework.

Learn By Example

12 Games in 12 Weeks | Lessmilk :: Phaserで毎週１つゲームを作った人の作品集

  • Game #1: Run!
    • スプライトシートを使ってキャラクター移動時のアニメーションを行っている。 
      // http://docs.phaser.io/Phaser.Loader.html#spritesheet
game.load.spritesheet('player', 'images/player.png', 20, 24);
this.player.animations.add('left', [6, 7], 10, true);
this.player.animations.play('left');

参考作品

Tutorials

Tips

TypeScript

Phaser × TypeScript で快適なゲーム開発環境を構築する - X X X

Tile Map

Editor

Tiled Map Editor

Mighty Editor

Deadly Alien Map Editor

Toast Editor

iPhone対応