時間的に続くかどうかわからん！

太郎と次郎の物語はまだまだ続くはずです。そのあたりをコード化してみました。

なんとなくCanvasを使ってみましたｗ
ドラクエ風にメッセージを表示するよう、サンプルコードを改造して作ってみました。

（javascript使ったことないので、果たしてこれでいいのか！）

今回はPhaserというライブラリが簡単そうだったので、使ってみました。必要なjavascriptを用意し、public/jsに保存してDIに登録します。

public/index.php

	$di->set('assets', function() {
		$assetsManager = new Phalcon\Assets\Manager();
		$assetsManager->collection('jsFooter')
			->setTargetPath('../public/js/jsfooter.js')
			->setTargetUri('js/jsfooter.js')
			->addFilter(new Phalcon\Assets\Filters\Jsmin())
			->addJs('js/jquery.min.js')
			->addJs('js/Phaser.min.js')
			->addJs('js/sample.js');
		return $assetsManager;
	});

これでminimizeされたjavascriptがjsfooter.jsとして出力されます。
次に、Voltのひな形にjsを追加します。

app/views/index.volt

<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>ごろプル</title>
 </head>
 <body>
  {{ content() }}
  {{ assets.outputJs('jsFooter') }}
 </body>
</html>

自分の書いたjavascriptはsample.jsとして保存します。

public/js/sample.js

// 出力メッセージ
var content = [
  "太郎と次郎ではなく正確には「タロ」と「ジロ」である。",
  "第3次越冬隊のヘリコプターにより、上空から昭和基地に2頭の犬が",
  "生存していることが確認される。着陸すると駆けてきて操縦士に寄",
  "ってきたが、個体の判別がつかなかった。急遽、第1次越冬隊で犬",
  "係だった北村が次の機で基地に向かうことになった。犬達は北村に",
  "対しても警戒していたが、北村は2頭の中の1頭の前足の先が白いの",
  "を認め、「ジロ」ではないかと考え名前を呼んだところ反応して尻",
  "尾を振った。もう1頭も「タロ」との発声に反応したことから、この",
  "兄弟が生存していたことが確認されたのである。",
  " ",
  "基地に置いてきた犬の食料や死んだ犬を食べた形跡はなく、アザラシ",
  "の糞やペンギンを食べて生きていたのだろうと北村は推測している。",
  "北村らは3次隊越冬の際、タロとジロが2頭でアザラシに襲いかかる所",
  "や食料を貯蔵する所を目撃している。この兄弟は特に首輪抜けが得意",
  "な個体だったと言われる。",
  " ",
  " ",
  "Wikipediaより"
];

// 変数たち
var charIndex = 0;
var lineIndex = 0;
var charDelay = 50;
var lineDelay = 400;
var line;
var text;

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', {
  preload : preload, create: create, render:render
});

function preload() {
  var result = $.ajax({
    type: "POST",
    url:  "getMessage",
    async: false
  }).responseText;
  var jsonArray = (new Function("return " + result))();
  jsArray = Object.keys(jsonArray).map(function(k) { return jsonArray[k] });
  content = jsArray;
};

function create() {
  text = game.add.text(32, 32, '', {
    font: "18px Yu Gothic", fill: "#ffffff"
  });
  nextLine();
};

function nextLine() {
  if (lineIndex !== content.length) {
    line = content[lineIndex];
    charIndex = 0;
    game.time.events.repeat(charDelay, line.length, nextChar, this);
    lineIndex++;
  }
};

function nextChar() {
  text.text = text.text.concat(line.charAt(charIndex));
  charIndex++;
  if (charIndex === line.length) {
    text.text = text.text.concat("\n");
    game.time.events.add(lineDelay, nextLine, this);
  }
};

function render() {
//  game.debug.text("Time until event: " + game.time.events.duration.toFixed(0), 32, 32);
//  game.debug.text("Next tick: " + game.time.events.next.toFixed(0), 32, 64);
};

コンテンツとなるテンプレートは以下です。ここにPhaserがCanvas作ってくれます。

app/views/index/index.phtml

<div id="game"></div>

出力されるメッセージは、あえてphpから渡してみますｗ
コントローラーが表示しないように、disableにします。
結果をJSON配列で返します。
（POSTかどうかチェックぐらいすればいいのに...）

app/controllers/GetMessageController.php

<?php
	
class GetMessageController extends Phalcon\Mvc\Controller
{
	public function indexAction()
	{
		$this->view->disable();
		$msg[] = "太郎と次郎は今日も元気に街を歩いています。\n\nケンカすることもありますけど、\nおおむね仲は良いようです。";
		$msg[] = "しかしながら、どうもいろいろな人に絡まれる日々が\n続いています。";
		$msg[] = "友だちも増えては来ましたが、それにも増して\n敵が増えているのも事実です。";
		$msg[] = "さあ、\n\n今後の太郎と次郎の活躍に\n\n期待しましょう!!";
		$msg[] = "\n\n\n\n\n\n続く";
		$this->response->setJsonContent($msg);
		return $this->response;
	}
}

（そのうち、Githubに纏めてアップしよう。ぅん）