CreateJSでボタンにマウスを乗せた時、指マークにする
createJSでPC向けのコンテンツを作ってる時に、当たり前ですけど、
ボタンとかリンクしてるところにマウスを乗せても矢印のまんまがデフォルトなんです。
なので、野中さんとICSさんの記事を見つけて、それを自分のボタン登録のファンクションみたいなやつに
追加しました。
野中さんの記事
http://f-site.org/articles/2012/11/29210000.html
ICSさんの記事
https://ics.media/tutorial-createjs/mouse_over.html
ウチの会社だと、ボタンのイベントを登録するのにいちいちリスナーを書いて行くのがめんどいので
createjs.MovieClip.prototype.makeBtn = functionfunction(p_mc,notRollOverFlg){
p_mc.addEventListener(
"click", function(e){
if(('ontouchstart' in window) && e.nativeEvent.type=="mouseup") return;//2回目をはじく
var mc = e.currentTarget;
mc.onclick(e);
}
);
if(!notRollOverFlg) {
p_mc.addEventListener("mouseover", handleMouseOver);
p_mc.addEventListener("mouseout", handleMouseOut);
}
}
// マウスオーバーしたとき
function handleMouseOver(event) {
document.body.style.cursor = "pointer";
}
// マウスアウトしたとき
function handleMouseOut(event) {
document.body.style.cursor = "";
}
これを書き出すAnimateの一番上の階層に書いておいて、
ボタンにしたいMCのあるところで、
this.makeBtn(btnName);
btnName.onclick = function(){〜};
と書きます。
いろんな所でボタンを作成する時に自動でポインタが指になるようになった!
これからFlashがブラウザで動かなくなって代わりにCJSとかで作った
りするものが増えたりしたら、こう言うのやっておくといいかもですね。
まー、これだとロールオーバーの時に別の挙動をさせたい時に
いい書き方を考えないといけないけど後で考えます。
一番いいのは普通にEaselJSが元々の機能として対応してくれれば良いんですけどね。
とりあえずこれからはこの機能を追加していこう!
createJSでipadとかratinaの時、ぼやけてると言われないように
ベクターなんかはそのまま大きくしても見えるんだけど、
ビットマップ使ってると「ぼやけてますね?」って言われちゃうんです。
ネット見てもあまりそこまで、追求している人もいないようなのですが、
Oさんに見てもらったんですけど、
easeljsの該当箇所を書き直してもらってできました。
ratinaの時と通常時、
読み込む画像を切り替えて、位置もずれないようなのができました。
これで、ratinaの端末で見ても画像がきれいなの作って下さいって
言われた時に、スマートに対応できます。
2倍の画像もらわないといけないですけど。
ベクターだけだったら、
https://gist.github.com/vicro/5829162
でもいけますね。試してませんけども。。。
createJSでテキストの高さセンター合わせ
みんなすごく苦労していて、ピクセルで数えるとかやってるけど、うまく行かなかった。
しばらく調べたら、
EaselJSの次期バージョンでオブジェクトの幅と高さを取得する実装
を見つけた。
getBoundsで超とれました。
var myBounds = obj.getBounds().clone();
// OR:
myRect.copy(obj.getBounds());
だってさ。
myBounds.x
myBounds.y
でバッチシです。
そういえば画像の高さも前の仕事でとってセンター合わせしてた。
検索しても出てこないのはみんな当たり前のように使ってるからなのか?
そういうことあまりしないのか。