【enchant.js】『恋愛カクテル ~あんず ver.~』を投稿しました!【box2d】

お久しぶりです。よいちです。
前回の投稿が4月ですから、7ヶ月以上ほったらかしでしたね。すいやせん。
何をしてたかってゆーと絵を描いておりました。
夏コミ受かったので七咲のエッチぃ漫画を描いてみようと四苦八苦(結果は聞くなw)。
ソレ以後もちまちま描き描き気がつけば師走。
いや、時の流れは早いものです。

それはさておき。
久しぶりに9leapにゲームを投稿しました。
その名も『恋愛カクテル ~あんず ver.~』

Box2Dを使った落ち物パズルで、アイコンを4つつなげて消していきます。
ツインテールのあんずちゃんアイコンを消すとハートをゲット、ハートを4つ手に入れたらゲームクリアです。
ゲーム画面からも分かる通り、これはマスコットアプリ文化祭応募作品でもあります。
『マスコットアプリ文化祭』そのものは11月くらいには知っていたのですが、12月に入ってtwitterのtlに投稿作の話題が流れてくるまですっかり失念しておりました。ある程度まとまったプログラミングも久方ぶりで、「enchant.js忘れたー! box2d忘れたー!」と叫びながら必死こいて仕上げました。見どころは画面中央のカクテルグラスです! canvasにpathで描きました!
よかったら遊んで下さい。

では。

【enchant.js】タグを使ってみよう

今回取り上げるのは、enchant.jsでのhtmlタグの利用についてです。

enchant.jsは、v0.5まではDOMベースの描画で、文字列を扱うLabelにタグを直接書き込むという荒業が可能でした。しかしv0.6以降、描画がCanvasベースに変わったためLabelでタグを利用することができなくなりました。
唯一使えるのがbrタグなのですが、これは内部で改行のキーとして使われているにすぎません。*1

では、v0.6以降のenchant.jsではhtmlタグを使うことが出来ないのでしょうか。
そんなことはありません。
ちょっとv0.6のリリースアナウンスを引いてみましょう。

具体的には CanvasLayer, DOMLayer という2つの描画方法をサポートするクラスが追加され、
Sceneは複数の Layer を持つようになりました。
Scene に addChild で描画ツリーに追加された Entity は、
各Layer (_element プロパティにDOMを持っていれば DOMLayer、そうでなければ CanvasLayer) に振り分けられ、
それぞれの Layer によって描画されることになります。

デフォルトでは、同じシーンの中では Canvas で描画されるオブジェクトの上に
DOM で描画されるオブジェクトが表示されます。

今までのAPIは変わりません。この変更を意識せず、今までどおり Entity, Sprite, Scene を使うことができます。 
但し、Sprite のプライベートだったプロパティ ._element, ._style が廃止されていますので、
これを使っていたコードは動かなくなる可能性がありますのでご注意ください。
DOM を表示したければ、._element プロパティにDOMを持つクラスを作るだけで DOM を表示できます。

Entityの_elementプロパティにDOM要素を生成してやればいいことがわかります。
さて、それでは今回のコードです。

widthを設定するのを忘れないで下さい。でないと、思わぬところで改行される結果となります。

*1:反対に改行するにはbrタグを使わないといけないってのはあまりいただけない仕様だと思います。

【tmlib.js】とくにつまづいた2つのこと

TM-Shooterブロック崩さぬで利用されているライブラリ『tmlib.js』をいぢりはじめました。
前々からさわってはいたのですが、慣れているenchant.jsとは勝手が違うため「アプリを1本作ろう!」というところまでは至っていませんでした。ですが、ちまちまいぢっているうちに勝手がなんとなくわかってきたので一念発起、現在ゲームをシコシコ製作中です。

今回はtmlib.jsをさわっていて「今後も同じ所で首をひねりそうだな」と感じた2つのポイントを書いておこうと思います。*1

*1:tmlib.jsそのものの使い方は他の方のブログなどを参照して下さい。

続きを読む

【enchant.js】Hello Physical World vol.9【box2d】

……3月なんてなかったんだよ!

というわけでお久しぶりです。
今回はHellow Physical World vol.9というこで、今までのことをおさらいしてひとつゲームを作ってみました。
物理エンジンを使ったゲームというと『Angry Birds』が有名ですが、それは前にも作ったことがありますしcode.9leapにもサンプルがあるので割愛。
今回は『鳥つながり』ということで『Flappy Bird』もどきを作ってみました。

画面をタップするとプレイヤーキャラクター(といってもただの◯)に上向きの加速が加わります。
これを利用して、欄外に出ないよう調整しながら、迫り来る障害物を避けて進みます。
障害物の移動は、単にx値を変更しているだけです。
プレイしてみてもらうとわかるのですが、PCが欄外に出たり障害物にあたったりしたわけでもないのに
ゲームが止まることがあります。
これは物理世界の事情にenchant.jsの画面描画が追い付いていないのが原因です。
これはどのように解決すべきか、みなさん考えてみてください。
ちなみに私の解決策はスペースレスキューにあります。

今回で一応Hellow Physical Worldの区切りとしたいと思います。
本当はこのあと『PhySprite.enchant.jsの使い方』『box2dwebの使い方』と歩を進めたかったのですが、いかせん気力が尽きました。
tmlib.jsでbox2dが使えるようになったら、また何か書くかもです……。
では!

【enchant.js】Hello Physical World vol.8【box2d】

気がつけばもう2月も1週が過ぎました。
お久しぶりです。
最低でも月に1度の更新を目標としている本ブログですが、1月はvita版アマガミの発売を記念してひとりアマガミ・アペンドに挑戦していた上に、月末月初に病気と相成りまして結局更新ができませんでした。
そんなこんなで先行き不穏当な出だしでありますが、今年もよろしくお願いします。

続きを読む

クリスマスダンジョンに挑んできたよ!

codeiq.jpで開催されていた「FizzBuzzダンジョン」及び「クリスマス版素数のダンジョン」をクリアできたので、せっかくだからとこちらのイベントにもお邪魔して来ました。

FizzBuzz問題を私が60文字、70文字で四苦八苦して解いてる中、twitter上には34文字で出来たとかつぶやいている方がいらっしゃったりするんですよ。いったいどういう回答なのか、どうやったらそれだけ短くなるのか。俄然興味が湧いてくるわけで、その秘密の一端でも垣間見ようと冷たい雨が降る中、ITメディアさんの会場にお邪魔したわけなんです。

いやー、すごかったです。
凄腕のハッカーをウィザードなどと言ったりもしますが、ダンジョンをクリアした中にはウィザードならぬソーサラー(妖術師)がいました。
もうね、何が書いてあるのかわからない。
え、そんな関数あったんだ! というのは序の口。その数字はいったいどこから出てきたんですか、その式はいったいどこをどうこねくり回したら導き出せるんですかという、もうこちらのアタマが理解を拒むようなものがぞろぞろ出てきました。
パソコンの説明書こそは現代の魔術書と朝松健が言ってましたが、今回出てきたのはネクロノミコンとかエイボンの書とかそういうレベルですよ。やってることは単なるFizzBuzzなんですけどね!

続きを読む