2015-05-22

enchant.jsを案件に使うためのひと工夫をいくつか

一ヶ月ほど、すっごく忙しかったです!

 

最近、サイトにちょい足しでアニメーションをつけることが多いです。

以前ならFlashでやってたでしょうが、最近じゃモバイルファーストなんて時代なんで、jqueryとかそこら辺でできるものはそうするって感じでしょうか。みんなどうしてるんだろう。

画像を弾ませるとか、ひらひらさせるとか、その程度ならjqueryでいいかなと思うんですが、もうちょっと突っ込んだ事をやりたい場合(たとえば、ユーザによる入力とかオブジェクト同士の接触判定?)、enchant.jsをつかえればなーとうっすら思ってました。

enchant.jsとは

今月の案件でちょっとつかってみたので、得た知見をこちらに

enchant.jsでhoverでcursorをpointerにしたい人は見るとよいでしょう。(←検索用)

そのまえに

今までenchant.jsを案件に使ってこなかった理由

いくつか挙げてみます、解決方法は下の方にまとめて書いてます

1 ひとつのweb画面に一個しかゲームがつくれない。

(以下enchant.jsのアニメーションをゲームとよびます)

ひとつのwebに複数のゲームを持てるよという情報がネットにいくつかあるんですが、イマイチやり方がよくわからないし、やってるところを見たことがない

ヘッダー、フッターにひとつずつゲームを配置するとか、要件がありそうじゃないですか。

2 ロード画面が真っ黒

おしゃれなサイトでいかにもローディングしてますみたいな黒い画面はナシじゃないですか

3 スマホでスクロールできなくなる

スマホの場合スクロールは画面をなぞってスクロールさせますが、ゲームの部分をなぞってスクロールしようとすると、タッチのイベントがenchant.jsに持っていかれる。

タッチがゲーム内のイベントとして取り扱われ、web画面はスクロールされません。スクロールが必要な画面だと困りますよね。

4 CSSが効かない

enchant.jsで作ったゲームでもオブジェクトを「マウスクリック」すると、別ページを開くといったような動作は可能ですが、クリックできるオブジェクトはカーソルを変えたいですよね。

cssだったら img:hover{ cursor:pointer } のような塩梅です。

enchant.jsの新しいバージョンは内部的にcanvasを使って「描画」しています。canvasの「中身」はCSSは使えないですね。残念。

どっこい、enchant.jsではゲームをDOMで描画できるんです(具体的にはDOMScene)

ゲームをDOMとして描画すればオブジェクトはdomだから、jqueryとかで対象のエレメントを抽出して、style属性つけてやればいいじゃん!解決!

と、思った時代が私にもありました。

なぜかDOMで描画するとIE11で動作しないという悲しい結末に。

ここで、べつにカーソルくらい変わらなくてもいーじゃねーかといってしまう私は、意識が低いプログラマです。

諸問題、これで解決しました

1 ひとつのweb画面に一個しかゲームがつくれない。

これはiframeで読みこめばよかったですよね。すっごく単純。

android4あたりの標準ブラウザはiframeがまともに動作しませんが、表示させるくらいならOKです。

ついでですが、iframeを読み込むときに、一瞬白い背景がちらっと表示されます(iframeの背景を透過していてもそうなる)。

ということは背景画像などを並べてるところにレイヤーとしてゲームを組み込むと、iframe部分が一瞬チカッと白くなる。これは頂けない。

なので、最初iframeのopacityを0とかにしておいて、windowがloadされたらopacityを1にするとかsetTimeoutで時間差で読み込んでやれば、チカっとならないと思います。多分。

2 ロード画面が真っ黒

これは普通にenchant.jsの仕様でロード画面を差し替えることができます。(下にサンプルあり)

3 スマホでスクロールできなくなる

上記でiframeで読みこめばいいじゃんと書きましたが、そのiframeのsrcとなるゲームの「上の」レイヤーでdivのパネルを置くことでゲームに触れなくする。

ということは、ユーザの入力ができなくなり、アニメーション動作だけになってしまうという事の引き換えですが。

ま、ユーザのタッチ操作ができる=スクロールできない、スクロールできる=ユーザのタッチ操作ができない、という切り分けでいいと思います

4 CSSが効かない

canvasなのでCSSが使えないのはかわりませんが、マウスカーソルを対象のオブジェクトに乗っけたら(hoverしたら)マウスカーソルを変えるくらいのことはできます。

やり方としては、ゲーム内に擬似的なマウスカーソルとなるspriteを追加し、それをmouseの座標に追随させる。

擬似的なマウスカーソルがクリックできるオブジェクトの上に来たら(接触したら)カーソルを変えるという感じです。

ソース見たほうが早いかも↓↓↓

サンプル

次の記事: mac OSX elcapitanへのアップデートでEssentials.pkgがなんとかというエラー

先日友人にMacMini late 2012を売ったらアップデートできないと報告があった。 実際、HDDを消去してMoutain LionからEl capitanにアップデートしようとすると、Essentials.pkgがなんとかというエラーがでてアップデートが完了できない。 ググると、純正のメモリを入れたら大丈夫だよとのこと。   純正メモリ?そんなものはない。   16GBのメモリに換装した際にさっさと売っぱらったからだ。 普段はWindows利用で、このMacMiniが初のMac。こういうこともあるのかと思いつつ、Mac Miniをひっくり返し、おもむろに8GB☓2のうち一枚取り外す。 そして再度アップデート。今度は最後までアップデートできた。他愛もないやつじゃ   ちなみに、MacMini持っ...続きを読む

前の記事: enchant.jsでFlappy Bird風ゲームを作ってみた

enchant.jsというのはJavascriptというプログラミング言語をベースとした、ゲームを作るための基本的なプログラムのことです。 Flappy Birdってか、おっさんな方々にはバルーンファイトって言ったほうが通じるかも。。 (イメージ図) http://matazo.net/g1/ こちらで ボタンか、← → ↑ キーで操作できます。 もっと工夫しろよってところですがね。 とくに、操作についてはすぐに慣れると思いますが、早々飽きが来るはずなので、そこでなにか仕掛けを作りたいものです。   しかし・・小学生の時の文集で将来はゲームデザイナーになりたいとか書いた記憶があるんですが、まだまだ道のりは遠いようです(^^; ゲームを作り始めるまえは、こうしたら、ああしたら面白いとか思いますが、作ってみると「これって面...続きを読む

最近の投稿

ページ