sceneに直接addChildしない方が良い

今回もちょっとした小技の紹介。大したことじゃないけど知っておくと便利かも。

enchant.jsでは画像はsceneにaddChildすることで表示されます。だけど最初から全部sceneにaddChildしていくと画面全体にエフェクトをかけて演出したいときに困ることがあります。

たとえば画面を揺らす演出をしたいときに画面内に表示されている得点などまで一緒に揺れるのはちょっとおかしくない?それも演出の内なら良いけどそうじゃないなら一緒に揺れると困るわけです。

で、どうするかというとGroupで分けます。ゲームのキャラクターなどを表示するGroupと得点などの情報を表示するGroupって感じに分けて作って振り分けてaddChildします。

例えばこんな感じにしてます。

ゲーム用にscreenというGroupを作ってゲーム部分はそこにaddChildします。keypadはGroupを継承して作ったバーチャルパッドのグループです。ボタンなどはこのkeypadにaddChildされています。

このように作っておくとscreenを動かしたり拡大縮小したりしてもkeypadは完全に別の存在になっているので影響を受けません。

 

大したことじゃないけど、あとから気づいて修正するのは面倒臭いので最初から分けて作っておくのが良いと思います(‘ω’)ノ

enchant.jsで右クリックを使いたい

enchatnt.jsではマウスの右クリックはサポートされていないようです。右でも左でもクリックは同じ扱いで処理されます。そして右クリックするとブラウザのメニューが表示されてしまいます。

でも右クリックが使いたい!!

ゲームで使うつもりだったのに出来ないのは困る!!ってことで方法を探しました。

javascriptで書いてみる

enchant.jsでサポートされていないならjavascript直で処理を書くしかない。ってことで検索して出てきたのがこちら

これでメニューの表示をキャンセルし、右クリックに処理を割り当てることが可能になります。

ただし!enchant.jsとは関連がないのでいろいろ困ることが出てきます。

問題1:eventの位置が違う

enchant.jsのtouchstartは設定したゲーム画面内の位置をeventで渡してくれますがjavascriptのmousedownで書くと当然enchant.js内の位置ではないです。ブラウザ内での位置になります。

なので右クリックかどうかの判定だけはmousedownで判断するが、位置に関してはenchant.jsのtouchstartで拾うということになります。

問題2:スマホに対応していない

当然と言えば当然なんだけどenchant.jsはスマホでもPCでも動くようにしてくれているゲームエンジンです。それを使わずjavascriptのmousedownを使うとスマホでは対応してくれません(マウスの処理だもんね)。なのでPCとスマホで処理を変える必要が出てきます。

ということでスマホかPCかを判別しなくちゃいけません。で、やり方を検索して出てきたのがこちら

まとめ

は?プログラムは?

って思われている方もいるかもしれませんがそれは自分でやってください(^^;)実はこれ、けっこう無理くりな感じになってキレイなプログラムにならないんですよ。なのでそんなプログラム見せたくないので自分で作ってください(^^;)

てかenchant.jsの必要な部分を改造する方法が分かればいいんですが今のところそこまでの知識がないので仕方ないです。いつか方法がわかればその時改めてばっちりなプログラムとともに紹介したいと思います(^^;)

画面タッチ処理のいろいろ

enchantjs講座

画面のタッチ処理について自分がやってみて気づいたことを紹介します。

画像無しのスプライトを使う

例えば画面全体のどこかを押すことで何か処理をさせるならシーンにイベントリスナを設定します。

じゃあ画面の右半分にタッチする場合と左半分にタッチする場合で処理を変えたい場合はどうすればいいのかな?

と思ったときに試してみたのが画像を設定しないスプライト。画像は設定していないので当然画面には何も表示されていないけど設定した大きさと場所にスプライトは存在しているようです。なのでイベントリスナを設定してやるとちゃんと反応してくれます。

タッチに当たり判定をつけて処理する

例えばタッチで触ったものに何かしらの処理をさせたいとき、普通はスプライトにイベントリスナを設置して処理すると思うんですが、これだと画像が重なった時に上になっている方のイベントが処理されます。

例えばそれが画像が小さくてスプライト的にはそこにあるけど見た目は何もない部分なんてときに、その余白部分の下に別の画像があって、プレイヤー的にはそっち押したつもりなんて状態の時に正しく処理できない(説明が難しい)。

上の画像で言うと重なってる部分では上になってる方のイベントリスナが発火します。もしプレイヤーが下の方を押したつもりだったらおかしなことになってしまいます。

というか余白部分でも反応してしまうのでそれをどうにかしたい(最初からそう言えば分かりやすかったんだな(^^;))。

で、どうしたもんかな?と考えた結果、スプライトのイベントリスナでは処理をせず、タッチした場所とキャラとの当たり判定を取るようにしました。

通常のシューティングゲームなどと同様にキャラの当たり判定を設定し、画面にタッチするたびにその場所とキャラとの当たり判定をとればOKです。

で、このとき上になってるキャラから当たり判定を取っていけば重なっていても問題なく処理できます。

【パズルゲーム】連鎖中毒

見た目はマッチ3風だけどちょっと違うパズルゲームです。
最初ちょっと戸惑うかもだけど、慣れるとバンバン連鎖が起こって結構楽しめます。

遊び方

同じ色の宝石同士をくっつけることができます。くっつけると数字が合算されます。
隣り合った宝石の数字が3つ以上ゾロ目や順目になれば消えます(333とか567とか432とかね)
宝石が消えると新しい宝石が上から落ちてきます。上から落ちてくるときにまた揃うと連鎖になります。連鎖が続くと得点がどんどん増えます。
同じ色の宝石の数字を合算する際、7を超えてしまうとお邪魔虫になってしまいます。お邪魔虫は隣で宝石が消えると一緒に消えます。

作った感想

これもenchant.jsでゲーム開発を開始した初期のゲームです。もともとはDOMで開発していたんですけどアニメーションさせるときに思ったよりも面倒臭かったので放置していて、その後enchant.jsでゲームを作り始めたときに作り直したものです。

特筆するようなことは特にないんですが、実は当初考えていたゲームとはかなり違っていて、最初はマッチ3のようなパズルゲームではなく、もっとややこしいルールがあったんだけど作ってみたら全然面白くなかった(^^;)それで試行錯誤しているうちに結局マッチ3的なゲームになってしまったという。。まぁそういうこともあるよね(;^ω^)

実はマッチの際の評価の仕方にちょっと問題があるんだけどプログラムが汚くなりすぎていて直す気がしないで放置してます。いつか直す。。

ああ、あとこれゴールデンウィークにちょっと改造したんだった。もともと落書きみたいな画像だったのをちゃんと奇麗に書き直して連鎖の演出やBGMもその時に追加しました。やっぱり見た目や音楽ってのはゲームにとってはとても重要なことってのはこの時はっきりわかりました。

まぁこれはこんなもんかな(‘ω’)ノ

【ランゲー】秘密警察ギャボリン第2話

オリジナルゲーム「秘密警察ギャボリン」の第2作目。今回はランゲーに挑戦。しかし、ただ走ってジャンプするだけでは能がないのでそれなりにオリジナルな要素を入れて頑張ってみたぞ!


ストーリー

平和な街に乙女の悲鳴が!!

学校帰りの女子高生のカバンを狙った変態ひったくりヤローが出現!!!

ヒーロー・ギャボリンが正義の鉄槌を下す!!(超適当)

遊び方

キーボードの矢印キーまたは画面下にあるボタンで操作します。

  • ↑・・ジャンプ。押す長さで高さが変わります
  • →・・ダッシュ。押している間加速します(基本押しっぱなしでOK)
  • ↓・・スライディング

こんだけです。ただし、ジャンプやスライディングはスピードが落ちます。さらに障害物に当たるとスピードは最低に戻ります。

画面下にある白のドットがギャボリン、赤のドットがひったくり犯です。離れすぎると見失うので気をつけましょう

作った感想

このゲームの制作過程では色々な発見がありました。

まず一番大きな発見がボタンの同時押し。このゲームを作るまではブラウザでは2か所同時押しには反応しないものだと思い込んでいました。なので最初は加速とジャンプ・スライディングは別々に押さなければいけないと思っていました。

ところがスマホで遊んでみると同時押しに反応するではないか!!まさかの発見に歓喜したのであります( `ー´)ノそしてここからゲームボーイ風キーパッド作成へとつながっていくのであります。

で、あとはこのゲームでは大きさの違うキャラ(障害物)を出すために表示するスプライトのオブジェクトの追加・削除が出現・消失のたびに行われるように作ったんですが、これはどうやらスマホには負担が大きすぎるようだということもわかりました。

スマホではスプライトは削除せず、不要なときは画面外に置いておいて必要な時に画面内に出して使うやり方の方が確実に処理が速い。大きな画像を使いたい場合は複数組み合わせて使うやり方を考えた方が良いようだ。