活発化する enchant.js と 9leap!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

『活発化する enchant.js と 9leap!!』 っということで, 最近よく遊ばせてもらっている enchant.js と 9leap について少し書こうと思います.

最近の enchant.js の勢いには目を見張るものがあります. 今年に入ってわずか1ヶ月で, WeGL をサポートした gl.enchant.js β版のリリースや canvas.enchant.js のリリースがありました.

また, enchant.js 版グランダリウスの公開や GGJ での enchant.js によるゲーム開発と, 生産性の高さと今後の可能性をまざまざと見せつけられました.

最近は, 私の職場でも GGJ がきっかけで enchant.js の名前をちょくちょく耳にするようになりました. 私は匿名でこのブログをやっているので『へぇ~そんな便利なライブラリがあるんすねぇ~』というスタンスをとっていますが…w(お酒弱いんですぅ~的なww)

そして, 2/18 に 「leapfest2012(リープフェスト)」の開催と enchant.js 公式ガイドブック の発売を控えています.

んでなんでこんなエントリーを書いているかというと, 私が「leapfest2012(リープフェスト)」に参加できないからですTT enchant.js はこのブログでもよく遊ばせてもらっていますし, 9leap でも何本かゲームを投稿させてもらっていて色々とお世話になっているのですが…

福岡で行われる別のセミナーに参加する予定なのです… だからみなさん参加してきてくださいって話ですw そして, つぶやいたりブログにまとめてくれたりするとうれしいです♪♪

leawpfest2012

Read More

enchant.js を使って 0 から 48 分以内にゲームを作ってみました! んで, その様子をビデオキャプチャーしてみました!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

enchant.js を使って 48 分縛りでゲームを作ってみました. んでその様子をビデオキャプチャーしてみました. もちろん 48 ってのは GGJ の 48 時間からきていますw

どんなゲームを作るか?ってとこから完成までほぼ 48 分ぴったりでできたので, GGJ に参加できなかった鬱憤を晴らすことができました.

キャプチャーした動画は youbute にアップして, 下に貼りつけています. HD 画質でアップしているので, HD モードでフルスクリーンにしてもらえればコードもクッキリ見えるかと思います.

また, 47:14 もあるので HTML5 モードにして 2倍速で見るのをオススメします. 暇な人はゆっくり見てね♪

作ったゲームは少し修正して(音を足したりなど) 9leap にアップしています. 下記の “Play Game” ボタンを押してもらえればプレイできます.

Read More

gl.enchant.js で『Avoid9』ってゲームを作りました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

1週間程前に gl.enchant.js でゲームを作りました.

タイトルは『Avoid9』. 色々な色の 9leap Box を左右移動やジャンプで避けるというシンプルなゲームです.

9leap に投稿してあるのでよかったら遊んで下さい.

Read More

hash(url の #~)を監視して変更イベントを発行するようにする tm.hash-observer.js を作りました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

前回に引き続き dispatch メソッドを活用したスクリプトです.

hash の値を監視して, 値に応じて表示物を変えるというテクニックは Gmail や Twitter といった Web サービスでも使われている テクニックです.

画面の更新が不要で情報を設定することができるので Ajax の普及と共に重要な技術となりました. ちなみに名前は 『Unique URLs』(昔エントリーとしてまとめたのでよかったらこちらも)

しかし, このテクニックには問題があります. 戻る/進むボタンに反応しないのです!! hash 値の変更イベントを発行する処理がネイティブにはないので, 表示を変えることができないのです.

この問題を解決するのが 『tm.hash-observer.js』 です. 『tm.hash-observer.js』は hash(url の #~)値を監視し, 変更があった際に変更イベントを発行するようにするスクリプトです.

簡単に導入できるのでよかったら使ってください.

Read More

textarea や input フォームの change イベントをリアルタイムで発行するようにする tm.form-observer.js を作りました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

textarea や input フォームの change イベントは, 編集後にフォーカスを解除したときに発行されます. つまり編集中, 値を変更してもフォーカスが残っている限り change イベントは発行されません.

しかし, Web ツールをつくる際, 機能として編集中でもリアルタイムで内容を参照して使いたいって時が多々あります.

そんな時に使えるスクリプト『tm.form-observer.js』を作りました.

『tm.form-observer.js』 はフォームを監視するスクリプトです. textarea や input フォームを 監視するよう指定することでリアルタイムでチェンジイベントを発行することができます.

前回のエントリー『JavaScript Tips – dispatchEvent を使いこなそう!!』 で解説した dispatchEvent を活用してネイティブっぽく拡張しているので, もうすでに作ってある Web ツールなんかでも簡単に導入できるように作ってあります.

ぜひ使ってみてください.

Read More

JavaScript Tips – dispatchEvent を使いこなそう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

JavaScript の dispatchEvent の情報があまりにも少なかったので解説用にサンプルを作ってまとめてみました. このエントリーでは dispatchEvent の基本的な使い方と活用例について解説します.

うまく使えばネイティブっぽく JavaScript を拡張したりってこともできる便利な関数です.

このエントリー用に作ったデモプログラムはダウンロードできるようにしてあるのでローカルでいじって遊んでみてください.

Read More