cocos2d-JSをインストールする

cocos2d-JSインストールメモ

環境

Python 2.7.8インストール済であること

インストール

http://cocos2d-x.org/downloadよりダウンロード(今回はV3.1)
pythonが入っていなければインストール

>python -V
Python 2.7.8

setup.pyを実行する
実行後、ターミナルを再起動するとcocosコマンドが使用できます。なお、Android用のツール類がないと怒られるがとりあえず無視。

>cd cocos2d-js-v3.1
>setup.py

テンプレートの生成任意のディレクトリで以下のコマンドを実行するとゲームの雛型が作成される
以下はtestプロジェクトを作成するコマンド。

cocos new test -l js -d .

サンプルの実行以下のコマンドを実行するとゲームが走る

>cd test
>cocos run -p web

coffeescriptへの変換

src/app.jsを編集していくっぽいひとまずcoffeescriptに変換しておく(要js2coffee)

>cd test
>js2coffee > app.js app.coffee

app.coffee

HelloWorldLayer = cc.Layer.extend(
  sprite: null
  ctor: ->

    #////////////////////////////
    # 1. super init first
    @_super()

    #///////////////////////////
    # 2. add a menu item with "X" image, which is clicked to quit the program
    #    you may modify it.
    # ask the window size
    size = cc.winSize

    # add a "close" icon to exit the progress. it's an autorelease object
    closeItem = new cc.MenuItemImage(res.CloseNormal_png, res.CloseSelected_png, ->
      cc.log "Menu is clicked!"
      return
    , this)
    closeItem.attr
      x: size.width - 20
      y: 20
      anchorX: 0.5
      anchorY: 0.5

    menu = new cc.Menu(closeItem)
    menu.x = 0
    menu.y = 0
    @addChild menu, 1

    #///////////////////////////
    # 3. add your codes below...
    # add a label shows "Hello World"
    # create and initialize a label
    helloLabel = new cc.LabelTTF("Hello World", "Arial", 38)

    # position the label on the center of the screen
    helloLabel.x = size.width / 2
    helloLabel.y = 0

    # add the label as a child to this layer
    @addChild helloLabel, 5

    # add "HelloWorld" splash screen"
    @sprite = new cc.Sprite(res.HelloWorld_png)
    @sprite.attr
      x: size.width / 2
      y: size.height / 2
      scale: 0.5
      rotation: 180

    @addChild @sprite, 0
    @sprite.runAction cc.sequence(cc.rotateTo(2, 0), cc.scaleTo(2, 1, 1))
    helloLabel.runAction cc.spawn(cc.moveBy(2.5, cc.p(0, size.height - 40)), cc.tintTo(2.5, 255, 125, 0))
    true
)
HelloWorldScene = cc.Scene.extend(onEnter: ->
  @_super()
  layer = new HelloWorldLayer()
  @addChild layer
  return
)