[node.js] [gulp] gulpfileを晒してみる。

  • 2017-03-31更新
    • debuggerの問題で出力フォルダをルートフォルダに変更した。
    • firefox debugger が上手くソースマップ拾わないねん……

忘備録も兼ねて、typescript + cson でゲーム開発用のgulpfileを晒しておきます。

VSCodeでコンパイル、デバッグすることを前提にしています。

フォルダ構成は以下の通り

  • /src - typescriptのフォルダ
  • /cson - csonのフォルダ。assetデータ、jsonデータ用。
  • /dest - 出力先フォルダ
    • 出力フォルダはルートフォルダへ
var gulp = require('gulp')
var cson = require('gulp-cson')
var ts   = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

// typescript
gulp.task('ts', () => {
    gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            target: "es6",
            module: "system",
            outFile: "app.js"
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('.'));
});

// cson
gulp.task('asset', () => {
    gulp.src('cson/*.cson')
        .pipe(cson())
        .pipe(gulp.dest('dest/asset'));
});

// default
gulp.task('default', ['ts', 'asset']);

[PoE] [2.6] Barrage Shadow 育成開始

ゾンビを盾に火の雨を降らせるのも飽きたので、Barrageの強化Jewelがあることだし それでキャラ作ろうという感じで。

育成用としてのこんなのもあるしね。Act1で装備できるの強すぎる。

とてもつよい弓

On Critを利用した型にしたいから武器は最終的にはワンドになるのかなぁとか。 わりと見切り発車で育成ゆっくりと開始。

[coffeescript] Cakefileで一括でcsonをjsonにコンパイルする

需要があるのかないのかよくわからないあ系記事。

Cakefileでフォルダ内にあるcsonファイルをjsonファイルに変換する機構が出来たので共有します。Cakefile以外でもnode.js系なら似たようなことは多分できると思います。

前提条件として、npm install cson はしておいてください。

そして今使ってるソースコードの一部です。

settings =
  asset: 'src/asset'
  destAsset: 'asset'

fs = require('fs')
path = require('path')
cson = require 'cson'

task 'asset', 'Compile CSON File', (options) -> compileCSON(settings.asset)

compileCSON = (base) ->
  for file in fs.readdirSync settings.asset
    path = "#{base}/#{file}"
    if path.endsWith '.cson'
      filename = file.substr(0, file.length - 5)
      obj = cson.load path
      json = cson.createJSONString(obj)
      fs.writeFileSync  "#{settings.destAsset}/#{filename}.json", json

スポンサーリンクです。

 

settings.asset フォルダ内の csonファイル を全て読み込んで順番に jsonにしていくだけの簡単なスクリプトです。gulpならもっと楽に出来る方法はあるんですがそれは置いといて。

これを作ったことによって、coffeescriptのコンパイルと同時にjsonに変換できるようになったので、大分楽になりました。

typescriptからいつのまにかcoffeescriptに鞍変えしたくろねこなのでした。

[pixi.js] [javascript] PIXI.Cointainerに"added"と"removed"がイベントが存在していたお話。

突然の描画用javascriptフレームワーク、pixi.js の話題です。

早速なのですが、PIXI.Containerに子の要素を追加したり削除したりするときに、その子に対してイベントが発生するのはご存知でしょうか。

pixi.jsのソースコードを眺めてたらわかることなのですが、マニュアルには書かれておらず便利なので共有しておきます。私もたまたま見つけました。

let a = new PIXI.Container();

let b = new PIXI.Container();
b.on("added", () => {
    // 子要素として追加されたときにemitされる。
    console.log("added.") 
})
b.on("removed", () => {
    // 子要素から外されるとemitされる。
    console.log("removed")
});

a.addChild(b)  // "added" が emit される。 
a.removeChild(b) // "removed" が emit される。

ActionScriptなどにはあった挙動だと思うのですが、初期化のタイミングを子要素に追加された時に出来るなど使いみちが色々じゃないかなと。