前回に引き続きCreateJSを試してみています。
今回は、前回よりゲームっぽいものをということでキャラクタを配置してキーボードで動かせるようにしてみました。
→サンプル
PC限定ですが、カーソルキーで移動できます。
素材はFirstSeedMaterialさんの素材を透過部分など一部加工して使用しています(二次使用禁止)。(RPGツクールをやっていた方ならお馴染み？ですかね)
素材を切り取って配置する方法は以下のようにしています。
「javascript」カテゴリーアーカイブ
CreateJSを試す1 とりあえず動かす
Flashを使っていた方にはわかりやすいと評判のJavaScriptライブラリ、CreateJSを使ってみています。
ゲームらしいものを作りたいのですが、とりあえずはそこに至るまでいろいろやる必要があるかな～ということでテストしてみました。まずは簡単にデジタル時計でも…ということでこんなのを作ってみました。
時計の背景の色は毎秒ColorMatrixFilterで変えています。
ソースはメイン部分を抜粋すると以下の様な感じです。
SublimeTextでHTMLとSCSSとJSを書いた話
もう既に有名で、もはや紹介する必要すらないであろうものではありますが、SublimeTextをしばらく使ってみたのでその話を書いてみます。
→Sublime Text: The text editor you’ll fall in love with
「恋に落ちるエディタ」という意味になるでしょうか。TOPページでデモが流れていて機能が紹介されていて、便利そうに見えます。Macっぽい感じがしますが、Windowsでも使えます。LinuxもOKみたいです。
とはいえ、このエディタの一番いいところは「何も設定しなくてもカッコイイ」というところではないかと個人的には思っています。エディタといえば、大抵は無骨な、メモ帳とほとんど変わらない、あるいはちょっと便利な機能を持っているものか、もっと統合開発環境みたいに重くて、やっぱり無骨なものがほとんどな気がしています。もちろん、カスタムすればどれも十分に良い感じになるのだけど、特に何もしなくてもカッコイイものは少ないのでは、と。(知らないだけかもしれない)。使っていたらそれなんてエディタですか？ってプログラマじゃない人が聞きたくなるエディタってすごいんじゃないかと。
jquery.cookieでcookieをJSで簡単に使う
cookieをJavaScriptから使うのはやや面倒なところもあるんですが、jquery.cookieを使うと簡単にできます。
→carhartl/jquery-cookie · GitHub
JSをダウンロードするか、CDNを使うかして、scriptタグに入れる。もちろんjQuery自体も必要です。
<script src="hogehoge/jquery.cookie.js"></script>
CDNを使う場合はcdnjsが便利かもしれません。
使い方はごく単純でcookieのセットと値取得は以下の様な感じでできました。
$.cookie("クッキー名", "値");//設定
var data = $.cookie("クッキー名");//値取得
一つ迷ったのはパスの指定でした。以下のようにすればできますが、全部に設定するのは面倒です。
$.cookie("クッキー名", "値", {path:"/"});
サイトの方にしっかりと書いてありますが、以下のようにすればデフォルトのパスが設定できます。
$.cookie.defaults.path = "/";
これでいちいち設定することなく、このドメインの中で同じクッキーを参照するようになります。(通常のデフォルトでは同じディレクトリ？)
昔はJSでやるのが面倒でPHPを介したりしたこともあったんですが、その必要も無さそうです。
JavaScriptでカスタムイベント
JavaScriptでActionScriptのようにカスタムイベントが使えたらいいなぁと思って調べてみました。AS3のようにカスタムイベントクラスを作って～という方法ではないですが、イベントのtypeを自分で独自に設定することができそうだったので、そちらでやってみました。
IEが問題で、IE9以降ではaddEventListenerが使えるようですが、それ以前はattachEventしか使えません。またfireEventはtargetがdocumentの子ノードとして配置していないとエラーになってしまいました。さらに、attachEventするイベントはIEで定められているものしか使えないようです。
これを何とかしてみたのが以下のものです。
使用方法は中にある通りです。
spfdCustomEvent.addListener("登録したいDOMオブジェクト", "イベント名", function(e){alert("呼びたい処理")});
spfdCustomEvent.dispatch("登録したDOMオブジェクト", "イベント名");
という感じで使用できるはずです。
こちらのサイトさんを参考にさせていただきました。detachEventにも対応させたかったので、1度クロージャにしたんですが、リスナにクロージャを登録して削除するところで失敗したので、別のやり方にしています。
他ライブラリを使えば余裕で実現できるかと思いますが、ライブラリに依存しない形で持っておきたかったのです。