enchant.jsをcoffeescriptで書く #CoffeeScript

はじめに

enchant.jsはjavascriptを使ったゲーム用のライブラリです。
ゲームを作りながら工夫したところなんかを、かいつまんで解説していきたいと思います。

まずは前作の宣伝から。
以前こういうのを作ってました。
http://www.nicovideo.jp/watch/sm23105589

今新作を作ってます。2年くらい前からダラダラ作ってます。
2017年9月12日公開を目標にやってます。

きっかけ

前作ったやつが、１つのJSファイルで作っていたのですが
コードが6800行くらいまで膨らみ、何がどこに書いてあるかわけがわからなくなってきたので、
ファイルをキレイに分割したい、見た目もスッキリさせたい、と思い
やることにしました。2年前の話です。

インストール

おぼろげな記憶を頼りに辿っていきます。

まずはcoffeescriptをインストールします。
たぶんこの辺を参考に適当にインストールしたと思います。
http://techblog.kayac.com/coffeescript-tutorial.html
Node.jsとnpmをインストールして、coffeescriptをインストール。

コンパイラにはgruntを選びました。
当時参考にした記事とは違いますが、このあたりを参考にすればインストールできると思います。
http://webdrawer.net/javascript/firstgrunt.html
インストールして出来上がったgruntfile（コンパイルの設定みたいなの）をいじります。
gruntfileはこんな感じです。

// 'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
  watch: {
      coffee:{
        tasks: 'coffee',
        files:['../project/coffee/**/*.coffee']
      }
  },
  coffee:{
    compile:{
      files: {
        '../project/public/js/main.js': ['../project/coffee/**/*.coffee']
      },
      options: {
        bare: true,
        sourceMap: true
      }
    }
  }
  });
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'coffee');
};

ここでファイルがうまく結合できなくて、ハマってしまった記憶があります。
確か解決策はoptoinsのbare: trueでした。

ディレクトリ構成はこんな感じです（いろいろ省略）

coffee/
　　├ !app/
　　│　　├ !enchant.coffee
　　│　　├ app_game.coffee
　　│　　├ app_sprite.coffee
　　│　　├ ・・・
　　├ game/
　　├ scene/
　　├ sprite/
　　│　　├ object/
　　│　　├ effect/
　　│　　　　　├ _effect.coffee
　　│　　　　　├ cut_in.coffee
　　├ ・・

文字列順でファイルが結合されていくので、
親クラスなど先に読み込みたいファイルには!とか_とか付けて調整してます。
フォルダ名には、game, scene, spriteなど、
親になるenchant.jsが持っているクラス名などを付けて、用途によって分類しています。

その他、当時参考にした記事です。興味のある方は見てみてください。
http://tmlife.net/programming/javascript/coffeescript-gl-enchant-js-15-minutes-3d-game.html
http://d.hatena.ne.jp/h6n/20111125/1322169941

変わったこと

フォルダやファイルで細かく分けたのでソースの場所がわかりやすくなりました。
あと、クラスの書き方がスッキリしました

before

var Yukipo = enchant.Class.create(Enemy, {
        initialize: function (scaleX, scaleY) {
             Enemy.call(this, scaleX, scaleY);

↑これはenchant.jsに標準で用意されてるクラスの作り方みたいです。

after

class Yukipo extends Enemy
    constructor:(scaleX, scaleY)->
        super scaleX, scaleY

coffeescriptなので全体的にスッキリしてます。
快適です。

さいごに

開発環境が快適になると、コーディング作業も楽しくなります。
次回はゲーム開発をより快適にするための、デバッグと単体テストのやり方を解説したいと思います。