ARCHIVE  ENTRY  COMMENT  TRACKBACK  CATEGORY  RECOMMEND  LINK  PROFILE  OTHERS
<< March 2024 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
2017.06.16 Friday

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が元々の機能として対応してくれれば良いんですけどね。

とりあえずこれからはこの機能を追加していこう!

2015.10.08 Thursday

createJSのMCを最前面にする深度変更

game_root.setChildIndex(btn_guard,(game_root.getNumChildren())-1);

game_rootはgame_root = this;
とかで深度を変える一つ上の階層をなんか指定しておく。
2015.09.02 Wednesday

createJSでipadとかratinaの時、ぼやけてると言われないように

createJSでipadとかratinaの場合、画面が2倍の細かさなので、
ベクターなんかはそのまま大きくしても見えるんだけど、
ビットマップ使ってると「ぼやけてますね?」って言われちゃうんです。



ネット見てもあまりそこまで、追求している人もいないようなのですが、
Oさんに見てもらったんですけど、
easeljsの該当箇所を書き直してもらってできました。
ratinaの時と通常時、
読み込む画像を切り替えて、位置もずれないようなのができました。

これで、ratinaの端末で見ても画像がきれいなの作って下さいって
言われた時に、スマートに対応できます。
2倍の画像もらわないといけないですけど。

ベクターだけだったら、
https://gist.github.com/vicro/5829162
でもいけますね。試してませんけども。。。
2015.09.01 Tuesday

createJSでwebfont

ゲームとか作ってると、スコアとかコンボ表示がきれいなテキストで
表示したくなるんだけど、今までは0〜9の文字を作って表示したりしていたんだけど、
webfontをhtmlに読み込んでcanvas内に表示すれば楽に表示ができました。

日本語のフォントはほぼ有料だけど、
点数とかコンボ表示は英数字でOKなので、まあまあバリエーションありそうです。

読み込みも、webfont.js使ってやればOK。
2015.06.03 Wednesday

SoundJSを実際に使う

ネット上でSoundJSをちゃんと書いている人とか使ってる人がいないので困った。
実際にこれから使ってみます。
分かったことがあればまた書きます。

とりあえず、
http://www.dango-itimi.com/blog/archives/2013/001162.html
に1回押させないとミュートが解除しないと言うことらしいのでやってみたけど、
全然うまく行かない。そもそも音が鳴らない。

こういう時、flashでかき出している自分と全部手書きの人と差が出るね。
また調べて分かったら書きます。

2015.05.07 Thursday

MotionGuidePlugin

なんかcreateJSを使ったゲームを作ることにまたなったんだけど、
やられた時に「ふらふら〜」ってやられるように動きをつけるのに、
MotionGuidePlugin
を使おうかとおもった。

これって、flashだとパスを書いて、それに沿ってアニメさせるの簡単だったけど、
パスを数値で指定しなくてはいけないね。
なんかflashからcreateJSになってもやってることは同じようなことだったりします。
 
2015.03.24 Tuesday

createJSでテキストの高さセンター合わせ

createJSでテキストの高さを取得する方法を調べていたら、
みんなすごく苦労していて、ピクセルで数えるとかやってるけど、うまく行かなかった。
しばらく調べたら、
EaselJSの次期バージョンでオブジェクトの幅と高さを取得する実装
を見つけた。

getBoundsで超とれました。

var myBounds = obj.getBounds().clone();
// OR:
myRect.copy(obj.getBounds());

だってさ。

myBounds.x
myBounds.y

でバッチシです。
そういえば画像の高さも前の仕事でとってセンター合わせしてた。
検索しても出てこないのはみんな当たり前のように使ってるからなのか?
そういうことあまりしないのか。
2015.02.25 Wednesday

JSのエディター

Bracketsと言うのを池田さん(しゃべったことは無い)が使っているというので調べてみたら無料なので使おう。

WebStormは再度値段を調べたが日本円にして12000円程なので使う気になっていない。

30日のトライアルじゃ無くて180日位のトライアルなら良さが分かるし、もうお金払わずにはいられない位使いこなしちゃうと思うんだけど、30日ってちょっとぼーっとしてたら使えなくなっちゃう。
2014.09.11 Thursday

マルチタッチ createJSで

createJSでこするゲームを作っている時にマルチタッチが反応すると
かんたんにこすれちゃっていたので、
event.pointerIDで一本の指でしかこすれなくした。
あまりpointerIDのこと載っているページが少ないな。
2014.07.23 Wednesday

preloadJSを使ってみた。

preloadJSがよく分からないので何回もやってみた。
実際にアップロードしないとhtmlが差し替わらないの知らないで何度もやってしまった。

マンガを画像で見せるサイトなどをスマホで見るとhtmlに画像を貼り付けているタイプのサイトの場合、
一気に読み込みしようとして画像が落ちたアイコンになるところとかがあるので、
これ使って表示すればいいのにな〜。と思った。
Powered by
30days Album