2015年11月14日

Autograd > README.md

Autograd という Python 用の自動微分ツールというものがリリースされたとのことで、README.md を日本語直訳してみました。 Python もこの手の数学分野も馴染みが薄いので、語句や表現がこなれておらず申し訳ありません。なお、原文はこちらです。

Autograd

Autograd は、ネイティブの Python 及び Numpy コードを自動的に微分します。それは Python の機能の巨大なサブセットを取り扱うことができ、それはループ、分岐、再帰やクロージャを含み、微分の微分の微分さえも扱えます。それはリバースモード微分(バックプロパゲーション:誤差逆伝播法として知られるもの)を使っており、配列値引数に対するスカラー値関数の勾配を効果的に得ることができることを意味します。主に意図されるアプリケーションは、勾配に基づいた最適化です。より多くの情報のためには、チュートリアル実施例のディレクトリをチェックして下さい。

利用例:

>>> import autograd.numpy as np  # 薄くラッピングされた numpy
>>> from autograd import grad    # あなたが必要とするかもしれないのは autograd 関数のみ
>>>
>>> def tanh(x):                 # 関数を定義
...     y = np.exp(-x)
...     return (1.0 - y)  / ( 1.0 + y)
...
>>> grad_tanh = grad(tanh)       # その勾配関数を取得
>>> grad_tanh(1.0)               # x = 1.0 での勾配を評価
0.39322386648296376
>>> (tanh(1.0001) - tanh(0.9999)) / 0.0002  # 階差と比較
0.39322386636453377

我々は好きなだけ何回でも微分を続けることができます:

>>> grad_tanh_2 = grad(grad_tanh)           # 2階微分
>>> grad_tanh_3 = grad(grad_tanh_2)         # 3階微分
>>> grad_tanh_4 = grad(grad_tanh_3)         # などなど
>>> grad_tanh_5 = grad(grad_tanh_4)
>>> grad_tanh_6 = grad(grad_tanh_5)
>>>
>>> import matplotlib.pyplot as plt
>>> x = np.linspace(-7, 7, 200)
>>> plt.plot(x, map(tanh, x),
...          x, map(grad_tanh, x),
...          x, map(grad_tanh_2, x),
...          x, map(grad_tanh_3, x),
...          x, map(grad_tanh_4, x),
...          x, map(grad_tanh_5, x),
...          x, map(grad_tanh_6, x))
>>> plt.show()

コードに落とした tanh を例としたファイルを参照下さい。

ドキュメント

あなたはここでチュートリアルを読むことができます。

エンドツーエンドの例

インストール方法

pip install autograd を実行して下さい。

著者

Autograd は Dougal Maclaurin, David Duvenaud(訳注:リンク切れ) 及び Matt Johnson によって書かれ、我々は活発に開発を続けています。バグや機能に対するリクエストの投稿は自由にお願いします。我々はまた、一般的な autograd のあなたの経験を聞いてみたいです。我々にメールを下さい!

我々は Jasper Snoek 及び HIPS グループの他のメンバに対し、有益な貢献とアドバイスに感謝したいと思います;Barak Pearlmutter は、自動微分に対する基礎的な作業と、我々の実装に対するガイドに対して;そして Analog Devices Inc. (Lyric Labs) 及び Samsung Advanced Institute of Technology は、様々なサポートに対して。

posted by cbbandtqb at 03:19| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする

2015年11月11日

Cocos2d-JS > ADD AUDIO EFFECT INTO PARKOUR GAME

原文はこちらです。

イントロダクション

このチュートリアルでは、私はオーディオサポートを我々のパルクールゲームに追加する方法を紹介したいと思います。

アクションにおける時間

HTML5 によってサポートされるオーディオフォーマット

まず最初に、どのフォーマットが HTML5 によってサポートされるのか見てみましょう:

ここで我々は ogg フォーマットを使います。なぜならそれは Android 及び Chrome によってサポートされているためです。

オーディオサポートを我々のゲームに追加

オーディオリソースのコピー

まず最初に、必要とされるオーディオファイルを我々の res ディレクトリにコピーしましょう。オーディオファイルは、要約セクションからダウンロードされ得るプロジェクトと同じプロジェクトの中に見い出せます。

我々は background.ogg を BGM のために、jump.ogg 及び pickup_coin.ogg をジャンプとコインとの衝突のために使います。

2番目に、幾つかのグローバル変数を resource.js ファイルに定義しましょう:

var res = {
    // リストへの追記
    background_mp3 : "res/background.mp3",
    jump_mp3 : "res/jump.mp3",
    pickup_coin_mp3 : "res/pickup_coin.mp3"
};

var g_resources = [
    // リストへの追記
    res.background_mp3,
    res.jump_mp3,
    res.pickup_coin_mp3
];

注記:全てのブラウザに渡るコンパチビリティを確実にするためには同時に "mp3" 及び "ogg" フォーマットの両方に同じオーディオファイルを持たせることが推奨されます。そしてあなたは resource.js に両方をリストする必要はないので、あなたがあなたのゲームをデバイス上で走らせるとき、 iOS 及び Mac のより良いコンパチビリティを有する "mp3" フォーマットをリストして下さい。

オーディオハンドリングコードをゲームに追加

まず最初に、PlayScene に入ったら BGM を追加して下さい:

注記:以下のコードを PlayScene.js 内の onEnter 関数の最後に追加して下さい。

//BGM を追加
cc.audioEngine.playMusic(res.background_mp3, true);

this.scheduleUpdate();

それから、ゲームが終了したら、我々は BGM を止めるべきです。そのため、以下のコード片を collosionRockBegin メソッド内に追加して下さい:

 //BGM を停止
cc.audioEngine.stopMusic();

最後に、ジャンピングのオーディオエフェクトとコインに衝突するオーディオエフェクトを追加しましょう。

//ジャンピングオーディオエフェクトを AnimationLayer の ★jump★ メソッドに追加
//ジャンプミュージック
cc.audioEngine.playEffect(res.jump_mp3);
//コインに衝突するオーディオエフェクトを PlayScene の ★collisionCoinBegin★ メソッドに追加
cc.audioEngine.playEffect(res.pickup_coin_mp3);

全ての変更を保存し、ゲームを実行します。これであなたのゲームはオーディオに満ち溢れた世界を奏でます。

要約

チュートリアルでは、我々は既存のゲームにオーディオサポートを追加することがいかに容易かを見てきました。あなたはここからプロジェクト全体をダウンロードできます。

ここから進むのは?

これでパルクールゲームの旅はマイルストーンに辿り着きました。以下のチュートリアルでは、我々はクロスプラットフォームサポートを追加し、我々の js ファイルの暗号化を幾つか行います。

このまま進みましょう!

posted by cbbandtqb at 00:41| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする

2015年11月03日

Cocos2d-JS > IMPLEMENT GAME OVER LOGIC AND MORE

原文はこちらです。

イントロダクション

このチュートリアルでは、我々はゲームオーバーのロジック、HUD の更新、そしてシンプルなジェスチャレコグナイザを実装します。 難しい話は抜きにして、チュートリアルに進みましょう。

ゲームの HUD の更新

プレイヤーのランニングメータの更新

まず最初に、updateMeter メソッドを StatusLayer クラスに追加しましょう:

    updateMeter:function (px) {
        this.labelMeter.setString(parseInt(px / 10) + "M");
    }

このメソッドは、定常的に labelMeter の値を更新します。ここで我々は、結果を整数値に変換するために parseInt 関数を使います。

引数 px はピクセルを表し、10ピクセル毎にメータ1つとなります。

ここで、我々はこのメソッドをフレーム毎に呼ぶべきです。

AnimationLayer.js を開き、以下のコードを update 関数の最初に追加して下さい:

        // メータの更新
        var statusLayer = this.getParent().getParent().getChildByTag(TagOfLayer.Status);
        statusLayer.updateMeter(this.sprite.getPositionX() - g_runnerStartX);

コインカウントの更新

プレイヤーがコインを集めたら、我々はコインのインジケータを更新すべきです。

まず最初に、addCoin メソッドを StatusLayer に追加しましょう:

    addCoin:function (num) {
        this.coins += num;
        this.labelCoin.setString("Coins:" + this.coins);
    },

プレイヤーがコインに衝突したら、我々はこのメソッドを呼び出すべきです。

これで実装することができます。

PlayScene.js を開き、以下のコードを colisionCoinBegin メソッドの最後に追加して下さい:

        var statusLayer = this.getChildByTag(TagOfLayer.Status);
        statusLayer.addCoin(1);

プレイヤーがコインに衝突する度に、メソッド内の colisionCoinBegin が呼び出され、我々のコインのカウントは1つづつインクリメントされるでしょう。

全てのファイルを保存し、git してみましょう:)

ここにスクリーンショットを置きます:

ゲームオーバーロジックをゲームに追加

ゲームオーバーレイヤのデザインと実装

物事をシンプルに保つために、我々はメニューアイテムをゲームオーバーレイヤの中心に追加します。

あなたが restart メニューをクリックすると、ゲームは再び再開します。

デザインは非常に僅かなので、実装しましょう。

ここに GameOverLayer.js の実装の全体を置きます:

var GameOverLayer = cc.LayerColor.extend({
    // コンストラクタ
    ctor:function () {
        this._super();
        this.init();
    },
    init:function () {
        this._super(cc.color(0, 0, 0, 180));
        var winSize = cc.director.getWinSize();

        var centerPos = cc.p(winSize.width / 2, winSize.height / 2);
        cc.MenuItemFont.setFontSize(30);
        var menuItemRestart = new cc.MenuItemSprite(
            new cc.Sprite(res.restart_n_png),
            new cc.Sprite(res.restart_s_png),
            this.onRestart, this);
        var menu = new cc.Menu(menuItemRestart);
        menu.setPosition(centerPos);
        this.addChild(menu);
    },
    onRestart:function (sender) {
        cc.director.resume();
        cc.director.runScene(new PlayScene());
    }
});

ここで我々は、我々のリスタートメニューアイテムを作成するために、s_restart_n 及び s_restart_s と名付けられた2つのスプライトを使いました。

そのため我々はリソースファイルを res ディレクトリに追加し、リソースパスを定義するべきです。

resource.js を開き、以下のコード行を追加して下さい:

    restart_n_png : "res/restart_n.png",
    restart_s_png : "res/restart_s.png"

//以下の2行を g_resources 配列の最後に追加
    res.restart_n_png,
    res.restart_s_png

init メソッドのコードは、自己説明的です。しかし、あなたは onRestart メソッドのコールバックに注意を払うべきでしょう。

我々は cc.Director の resume 関数を呼びました。なぜこのようなことがなされるべきなのでしょうか?なぜなら、プレイヤーが死んだ時に pause メソッドが呼ばれるからです。

プレイヤーが岩に衝突したらゲームオーバー

それでは、プレイヤーが岩に衝突したらゲームオーバーレイヤを表示するようにしましょう。

PlayScene を開き、collisionRockBegin メソッドの最後に以下のコード行を追加して下さい:

  collisionRockBegin:function (arbiter, space) {
        cc.log("==game over");
        cc.director.pause();
        this.addChild(new GameOverLayer());
    },

そう、これでお終いです。それでは再びゲームを実行して下さい。

ここに最終的なスクリーンショットを置きます:

あなた自身のシンプルなジェスチャレコグナイザの実装

このセクションでは、我々は非常にシンプルなジェスチャをデザインします。

我々が我々の指をスクリーン上の下から上にスワイプすると、レコグナイザはそれを検知します。

スワイプジェスチャの検知アルゴリズムは飛ばします。タッチ開始イベントが検知されると、我々は配列中の最初のタッチポイントを格納します。タッチ移動イベントが検知されると、我々はポイント配列の最後にタッチポイントを追記します。

我々は、スワイプの方向を決定するために、2つの隣接した点のx軸もしくはy軸の差を比較することができます。

ここにマジックを行うコード片を置きます:

function Point(x, y)
{
    this.X = x;
    this.Y = y;
}

// クラス定義
function SimpleRecognizer()
{
    this.points = [];
    this.result = "";
}

// onTouchBegan で呼び出し
SimpleRecognizer.prototype.beginPoint = function(x, y) {
    this.points = [];
    this.result = "";
    this.points.push(new Point(x, y));
}

// onTouchMoved で呼び出し
SimpleRecognizer.prototype.movePoint = function(x, y) {
    this.points.push(new Point(x, y));

    if (this.result == "not support") {
        return;
    }

    var newRtn = "";
    var len = this.points.length;
    var dx = this.points[len - 1].X - this.points[len - 2].X;
    var dy = this.points[len - 1].Y - this.points[len - 2].Y;

    if (Math.abs(dx) > Math.abs(dy)) {
        if (dx > 0) {
            newRtn = "right";
        } else {
            newRtn = "left";
        }
    } else {
        if (dy > 0) {
            newRtn = "up";
        } else {
            newRtn = "down";
        }
    }

    // 最初に結果のセット
    if (this.result == "") {
        this.result = newRtn;
        return;
    }

    // ディレクトリが変更されていれば、レコグナイザは非サポート
    if (this.result != newRtn) {
        this.result = "not support";
    }
}

// onTouchEnded 内で呼び出し
SimpleRecognizer.prototype.endPoint = function() {
    if (this.points.length < 3) {
        return "error";
    }
    return this.result;
}

SimpleRecognizer.prototype.getPoints = function() {
    return this.points;
}

ジェスチャが検出された後で、我々は最終的な結果を得るために SimpleRecognizer の endPoint を呼び出すことができます。

現在、4つのシンプルなタイプをサポートしています:上、下、左、及び右です。あなたはより複雑なあなた自身のレコグナイザに拡張することができます。

タッチイベント、プレイヤージャンピングアニメーション及びロジックのハンドリング

プレイヤーのジャンピングアニメーションを追加

ジャンピングアニメーションを実装するために、我々は我々のゲーム用の絵を最初に用意すべきです。ここにあなたのためにそれを置いておきます。

あなたは要約セクションからプロジェクト全体をダウンロードできますし、res ディレクトリ内に running.plist 及び running.png ファイルをコピペすることもできます。

ゲームがスタートすると、プレイヤーは、彼に岩が衝突するまで無限に走り続けます。我々は上へスワイプさせることでプレイヤーをジャンプさせたいと思います。

従って我々はもう少しゲームをプレイすることができます。

プレイヤーがジャンプアップもしくはジャンプダウンしたら、我々は一致するアニメーションを再生する必要があります。

そのためまず最初に、2つの追加のアニメーションアクションメンバ変数を AnimationLayer に追加しましょう:

jumpUpAction:null,
jumpDownAction:null,

そして initAction と名付けられた新しいメソッドを追加しましょう:

  initAction:function () {
        // runningAction を初期化
        var animFrames = [];
        // 数字は spriteSheet と同じ
        for (var i = 0; i < 8; i++) {
            var str = "runner" + i + ".png";
            var frame = cc.spriteFrameCache.getSpriteFrame(str);
            animFrames.push(frame);
        }

        var animation = new cc.Animation(animFrames, 0.1);
        this.runningAction = new cc.RepeatForever(new cc.Animate(animation));
        this.runningAction.retain();

        // jumpUpAction を初期化
        animFrames = [];
        for (var i = 0; i < 4; i++) {
            var str = "runnerJumpUp" + i + ".png";
            var frame = cc.spriteFrameCache.getSpriteFrame(str);
            animFrames.push(frame);
        }

        animation = new cc.Animation(animFrames, 0.2);
        this.jumpUpAction = new cc.Animate(animation);
        this.jumpUpAction.retain();

        // jumpDownAction を初期化
        animFrames = [];
        for (var i = 0; i < 2; i++) {
            var str = "runnerJumpDown" + i + ".png";
            var frame = cc.spriteFrameCache.getSpriteFrame(str);
            animFrames.push(frame);
        }

        animation = new cc.Animation(animFrames, 0.3);
        this.jumpDownAction = new cc.Animate(animation);
        this.jumpDownAction.retain();
    },

この関数において、我々はプレイヤーの全てのアニメーションを初期化しました。

最後に、init 関数にて以前実施した runningAction の初期化コードを削除し、代わりに initAction メソッドを呼び出しましょう。

//アクションの初期化
this.initAction();
//        // runningAction の初期化
//        var animFrames = [];
//        for (var i = 0; i < 8; i++) {
//            var str = "runner" + i + ".png";
//            var frame = cc.spriteFrameCache.getSpriteFrame(str);
//            animFrames.push(frame);
//        }
//        var animation = new cc.Animation(animFrames, 0.1);
//        this.runningAction = new cc.RepeatForever(new cc.Animate(animation));

タッチイベントのハンドリング

それではタッチイベントをハンドリングしましょう。まず最初に、我々は AnimationLayer のタッチハンドリングを有効化すべきです。

以下のコード片を init メソッドの最後に追加して下さい:

 cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: this.onTouchBegan,
            onTouchMoved: this.onTouchMoved,
            onTouchEnded: this.onTouchEnded
        }, this)

これらの2つのコード行はタッチのディスパッチ関数を有効化することができます。

それでは、我々のタッチイベントをハンドリングするのに必要な3つのコールバックを追加しましょう:

 onTouchBegan:function(touch, event) {
        var pos = touch.getLocation();
        event.getCurrentTarget().recognizer.beginPoint(pos.x, pos.y);
        return true;
    },

    onTouchMoved:function(touch, event) {
        var pos = touch.getLocation();
        event.getCurrentTarget().recognizer.movePoint(pos.x, pos.y);
    },

    onTouchEnded:function(touch, event) {
        var rtn = event.getCurrentTarget().recognizer.endPoint();
        cc.log("rnt = " + rtn);
        switch (rtn) {
            case "up":
                event.getCurrentTarget().jump();
                break;
            default:
                break;
        }
    },

あなたがスクリーンにタッチすると、onTouchBegan メソッドが呼び出されます。あなたが指をそのままにして周辺を動かすと、onTouchMoved メソッドが呼び出されます。あなたが指を離すと、onTouchEnded メソッドが呼び出されます。

ここで我々は、"スワイプアウト"ジェスチャを検知するために、我々のシンプルなジェスチャレコグナイザを使いました。

全部のまとめ

それでは全てをまとめましょう。

まず最初に、以下の列挙を AnimationLayer の先頭に追加して下さい:

// ランナーのステータスの列挙を定義
if(typeof RunnerStat == "undefined") {
    var RunnerStat = {};
    RunnerStat.running = 0;
    RunnerStat.jumpUp = 1;
    RunnerStat.jumpDown = 2;
};

我々はプレイヤーの異なるステータスを表現するためにこれらの列挙を使います。

それから我々は AnimationLayer 内にもう2つのメンバ変数を追加すべきです:

 recognizer:null,
 stat:RunnerStat.running,// 走るステータスで初期化

そしてレコグナイザを init メソッドの最後で初期化して下さい:

 this.recognizer = new SimpleRecognizer();

最後に、我々は我々の jump メソッドを実装すべきです:

 jump:function () {
        cc.log("jump");
        if (this.stat == RunnerStat.running) {
            this.body.applyImpulse(cp.v(0, 250), cp.v(0, 0));
            this.stat = RunnerStat.jumpUp;
            this.sprite.stopAllActions();
            this.sprite.runAction(this.jumpUpAction);
        }
    },

そしてまた、我々は update 関数内でこれらのものを結び付けるべきです。

//AnimationLayer の update メソッド内
    // ランナーのステータスを確認及び更新
        var vel = this.body.getVel();
        if (this.stat == RunnerStat.jumpUp) {
            if (vel.y < 0.1) {
                this.stat = RunnerStat.jumpDown;
                this.sprite.stopAllActions();
                this.sprite.runAction(this.jumpDownAction);
            }
        } else if (this.stat == RunnerStat.jumpDown) {
            if (vel.y == 0) {
                this.stat = RunnerStat.running;
                this.sprite.stopAllActions();
                this.sprite.runAction(this.runningAction);
            }
        }

もう一言、中身をクリーンアップするのを忘れないで下さい。AnimationLayer から抜けたら、我々は生成されたアクションをリリースするべきです。

    onExit:function() {
        this.runningAction.release();
        this.jumpUpAction.release();
        this.jumpDownAction.release();
        this._super();
    },

あなたはまた、全ての生成された js ファイルが cocos2d.js ファイル中にロードされているか否かを確認したくなるかもしれません。

要約

おめでとうございます!あなたはもう1つの壮大なチュートリアルを再び完了しました。

このチュートリアルで実施してきたことを振り返りましょう。

まず最初に、我々は我々のゲームの HUD 要素の更新方法を学びました。

それから我々はゲームオーバーロジックを追加しました。

最後に、我々は、我々のヒーローのジャンピングアクションの制御をハンドリングするためのシンプルなジェスチャレコグナイザを作成しました。

あなたは最終的なプロジェクトをここからダウンロードできます。

ここから進むのは?

次のチュートリアルでは、我々はパルクールゲームの最後の基本をカバーします。それでは続けましょう!

posted by cbbandtqb at 01:02| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。