磯野ー！２Dゲーム開発しようぜー！ HTML5編 その３

磯野と中島のゲーム開発も今回で3回目。HTML5編は今回で終了だ。ちなみに今回もめがねと坊主頭の出番はない。前回までの分は以下。

磯野ー！２Dゲーム開発しようぜー！　HTML5編　その１
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その２

coffeescripts/platform.coffee

class GamePlatform
 constructor: (@stage, width, height, contentManager)->
  # 背景の用意
  background = new createjs.Bitmap contentManager.background
  background.setTransform 0, 0, width/400.0, height/300.0   # 背景画像は400*300でCanvasサイズと合わないので拡大する
  @stage.addChild background

  # 文字列表示
  text = new createjs.Text "Click on the characters!", "bold 24px Meiryo", "#000"
  text.x = (width/2)-(text.getMeasuredWidth()/2)
  text.y = 10
  # text.align = 'right'  # align指定はこの方法で
  @stage.addChild text

  # スプライトシートの設定
  shipSpriteSheet = new createjs.SpriteSheet
   images: [contentManager.ship]
   frames:
    width:100   # １フレームの幅を指定
    height:100  # １フレームの高さを指定
    regX:50     # 中心点（拡大縮小、回転、移動用の）を指定
    regY:50     #
   animations:
    move:
     frames: [0, 1, 2, 3, 4, 5] # アニメーションフレームの指定
     frequency: 10   # フレームごとの速度
  # スプライトアニメーションの設定
  shipAnimation = new createjs.BitmapAnimation shipSpriteSheet
  shipAnimation.x = shipAnimation.y = 100
  # スプライトシートから指定のフレームの画像を抜き取ってBitmapオブジェクトを作成する
  ship = new createjs.Bitmap createjs.SpriteSheetUtils.extractFrame shipSpriteSheet, 0
  ship.regX = ship.regY = 50 # 中心点をスプライトアニメーションに合わせる
  ship.x = ship.y = 100
  ship.onClick = =>
   shipAnimation.rotation = 90
   @stage.addChild shipAnimation
   shipAnimation.gotoAndPlay "move"
   @stage.removeChild ship
   # オブジェクトアニメーションを設定する
   createjs.Tween.get(shipAnimation)
     .to({x:width+100, scaleX:2, scaleY:2}, 1000, createjs.Ease.cubicIn)
     .to({rotation:270})
     .to({x:100, scaleX:1, scaleY:1}, 1000, createjs.Ease.cubicOut)
     .to({rotation:0}, 500)
     .wait(500)
     .call =>
      @stage.addChild ship
      @stage.removeChild shipAnimation
      shipAnimation.stop()
  @stage.addChild ship

  sqSpriteSheet = new createjs.SpriteSheet
   images: [contentManager.square]
   frames:
    width:100
    height:130
    regX:50
    regY:65
   animations:
    walk:
     frames: [0, 1, 2, 3, 4]
     frequency: 20
  sqAnimation = new createjs.BitmapAnimation sqSpriteSheet
  sqAnimation.x = 100
  sqAnimation.y = 250
  sq = new createjs.Bitmap createjs.SpriteSheetUtils.extractFrame sqSpriteSheet, 0
  sq.regX = 50
  sq.regY = 65
  sq.x = 100
  sq.y = 250
  sq.onClick = =>
   @stage.addChild sqAnimation
   sqAnimation.gotoAndPlay "walk"
   @stage.removeChild sq
   createjs.Tween.get(sqAnimation)
     .to({x:width+100}, 1000, createjs.Ease.quadInOut)
     .to({scaleX:-1})    # Y軸を中心にフリップする
     .to({x:100}, 1000, createjs.Ease.bounceOut)
     .to({scaleX:1})
     .wait(500)
     .call =>
      @stage.addChild sq
      @stage.removeChild sqAnimation
      sqAnimation.stop()
  @stage.addChild sq

  # Containerを使用してオブジェクトをまとめて管理したりもできる
#  container = new createjs.Container()
#       player = new createjs.Bitmap somethingImage
#  container.addChild player
#       player2 = new createjs.Bitmap somethingImage2
#  container.addChild player2
#  @stage.addChild container

  @fps = new createjs.Text "0 fps", "bold 14px Arial", "#000"
  @fps.x = @fps.y = 10
  @stage.addChild @fps
 startGame: ->
  createjs.Ticker.userRAF = true
  createjs.Ticker.setFPS 60
  createjs.Ticker.addListener this
 tick: =>
  #
  # キー入力にあわせたキャラクタの動作やあたり判定などをここで行う
  #
  @fps.text = (Math.round createjs.Ticker.getMeasuredFPS())+" fps"

  @stage.update()
window.GamePlatform = GamePlatform

・4行目、画像からBitmapオブジェクトを生成する
・5行目、setTransformは移動、スケール、回転、傾き、中心点をまとめて指定できる便利メソッド。ここではスケールまでしか指定していない
・6行目、Zオーダーという概念はなく後からstageに追加されたものほど上にくる。Zオーダーの指定がしたい場合は自分で実装しよう
・9行目、テキスト生成はこのとおり
・12行目、alignの指定などもおこなえる
・16行目、スプライトシートの設定を行う。画像の指定は複数可能。そちらの詳細はSpriteSheet Classを参照してほしい
・21行目、アクションの中心点を設定する。意味が不明な場合はXY両方の値を0に変更して実行してみよう。宇宙船の回転のアニメーションの部分で意味が理解できるはずだ
・23行目、BitmapAnimationで使用するアニメーションの設定を行う。ここの設定方法は複数あるのでこちらもSpriteSheet Classを参照してほしい
・28行目、BitmapAnimationオブジェクトを生成する。16行目で行ったスプライトシートのアニメーション設定をこのBitmapAnimationオブジェクトを通して使用する
・31行目、スプライトシートから指定のフレームを抜き取ってBitmapオブジェクトを生成する
・34行目、クリックイベントをハンドルする。これもEaselJSの大きな功績のひとつだ
・37行目、指定のアニメーションを実行する
・40行目、TweenJSを使用してオブジェクトアニメーションを設定する。指定のオブジェクトのプロパティ値を指定の時間と動かし方で変更できる
・46行目、TweenJSのアニメーションの終わりにコールバックを設定する。そのコールバックで宇宙船のアニメーションをstageからはずしたり宇宙船のアニメーションを止めたりする
・77行目、画像をフリップさせる場合はscaleXまたはscaleYに-1を設定する
・87行目、Containerを活用するとオブジェクトのグルーピングも楽に行える
・98行目、Tickerの設定あれこれ。詳細はTicker Classを参照してほしい
・102行目、今回のサンプルではあたり判定やらキー操作でのプレイヤーキャラクターの動作などは実装しなかったけれどそういった実装はtick()で行うようになる
・106行目、FPS（Frame Per Second）を表示する


ざーっと説明したけれども大体EaselJSを使ってのゲーム開発がどういうものか理解できただろうか。前回にも述べたけれどTicker（に登録したオブジェクトのtick()）とStageという概念が基礎にあるだけでその上で行うゲーム開発は通常のゲーム開発とさほど変わらない。というわけでこれまでの解説を通してEaselJS、TweenJS、PreloadJSの便利さとか開発のしやすさが伝わったら幸いだ。


次回からはAndEngineの解説を行っていく。