--------

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2011-11-05

タッチがうまくとれない

引き続きenchant.jsを使ってゲーム製作。
クリアするたびにボールの数を変えて難易度を上げるのと
ボールの挙動をすこしそれっぽくしてみました。

ボール飛ばし 2011-11-04 - jsdo.it - share JavaScript, HTML5 and CSS



前に、enchant.jsの標準の機能では画像のアラインがセンターセンターにできない件について書きましたが、
なんか公式のプラグインとして配布していました。
enchant.jsでオブジェクトの回転軸を変更するプラグイン
次に作るゲームから使おうと思います。

今回は、タッチ関係の処理を主に変更しました。

タッチ処理は、enchantの'touchXXX'系のイベントでPCの場合はマウス操作
スマホの場合はタッチパッド操作の処理を設定できるのでそれを使っていましたが
ボールが小さいのか、スマホの場合だとボールの位置を性格にタッチしないと反応せず
いささかストレスがたまる操作感になってしまいました。

なので、タッチ可能領域を広げようかと思い
ボールの中心から一定距離までをタッチ可能領域にしようと試してみましたが
'touchXXX'系のイベントで関数に渡される引数には
ブラウザ上の座標が入っており、WEBページ自体が拡大縮小されている場合は
この値と実際のボールの座標が異なった値になっていました。

これを解決するためには拡大縮小を禁止する必要があり
実際に試してみたのですが、iPhoneで実行してみるとなぜか拡大されてしまい
うまく座標がとれません。仕方がないのでゲームのどこをタッチしても反応するようにしました。

次の課題はスマホとPCの入力の互換性をどう保つかになりそうです。

自分はiPhone4しかもっていないので、それでテストプレイしてみたところ
ボール25個くらいから処理落ちが目に付き始めてきました。
もっと旧世代だと早い段階で処理落ちしそうな勢いです。

この辺を調整する環境を作る必要が出てきそうですね。

次はボール飛ばしをいったん切り上げて、スマホ特有のマルチタッチや
各種センサ系を使った簡単なゲームを作ってみようかと思います。
スポンサーサイト

theme : JavaScript
genre : コンピュータ

2011-11-02

最低限文化的なゲームができました。

一応ゲームの目的となるルールを作り、
最低限文化的なゲームになりました。
ルールは↓のReadMeにも書いてありますが、
赤いボールをタッチしたままスライドして四角いオブジェクトにあてるとクリアとなります。

ボール飛ばし 2011-11-02 - jsdo.it - share JavaScript, HTML5 and CSS




ある程度いろいろ触っていて標準で実装されている機能の限界にぶつかりました。
まず標準で実装されているSpriteクラスSurfaceクラスでは、
画像のアラインをセンターセンターにできません、言い方を変えるとオブジェクトの座標が画像の中心になるような
設定が存在しません。
ですので、オブジェクトの座標が画像の左上になりますが、
これが今回のようなボールのような球状のものの当たり判定を行う上では都合が悪いです。

ボールの中心からの向きの計算や、衝突の判定の際に毎回中心を求める必要があるため
無駄に計算が複雑になってしまい、可読性がガンガン失われてしまいます。

このゲームでは、途中でこの事態に気づいたので、座標の算出方法を変えることで対処しました。
まず、ボールの当たりの計算の際は、ほかのボールも画像の左上がオブジェクトの位置になっているので
そのまま計算を行います。
ゲームのソースでいうと、uBallクラスmPosXmPosYがオブジェクトの中心の座標であるとして計算を行います。

その後にuBall::update()mPosXmPosYの位置が画像の中心になるように
画像の表示位置をずらすような方法にしてこの問題を回避しました。

ほかにもイベントリスナという、イベントが発生したときに
コールバックされる関数を登録しておくシステムがありますが、
コールバックされる際に渡される引数eのデータが間違った値になっているのか苦しめられました。

引数eはEventクラスのオブジェクトになっていて、フィールドとして
x,y:イベントが発生した座標
localX,localY:イベントが発生したオブジェクトの中心からの相対位置

といったパラメータを持っています。
赤いボールを飛ばすための処理として、
ボールの'touchstart'イベントや'touchmove'イベントをイベントリスナに登録して
画像の位置とlocalX,localYの位置が一定以上離れたらボールを飛ばそうとしましたが
ボールをタッチして'touchstart'が呼ばれた時点で
ボール3~4個分の距離が離れていることになるくらい異様なlocalX,localYの値が入っていました。

おかげさまで危うくタッチした瞬間想定外の方向に飛んでいく運ゲーができてしまうところでした。

次はソースを整理しつつ、もうちょっとゲーム性を持たせます。

theme : JavaScript
genre : コンピュータ

2011-10-30

enchant適用してみる

前に作ったボールを飛ばすやつを
enchantエンジンに乗せてみました。

タッチ処理と仮想十字ボタンを入れようとしていたところで
おねむの時間になってしまったので移植作業がまだ残っています。

たぶんPC限定じゃないと動かないと思ふ
テンキーの十字ボタンとかでボールがうごく・・・はず・・・

ボール飛ばし 2011-10-30 - jsdo.it - share JavaScript, HTML5 and CSS




enchantをいろいろ触ってなんとなく仕様が把握できました。
ユニットの概念とシーンの概念が実装されているため、
カメラやキャラクター、エフェクトや背景などをユニットとして独立した機能として実装できそうです。

といっても、ライブラリに実装されているSpriteクラスやNodeクラスでは、
ユニットのメタ情報を取得するための手順が実装されていないようなので
それなりの規模でゲームを作る場合には、デバッグを容易にするためにも
ユニットが一体どこのどいつなのかを知るための仕組みを、Spriteクラスを継承して用意する必要があるかもです。

シーンの概念もあるため、RPGとかアクションゲームが作りやすそうです。
RPGだと町とかダンジョンとか1マップごとに1シーンとして作れば、
マップ間の移動の調整や、あとからマップとか増やすような開発手法がとれそうですし
アクションゲームならステージやタイトル、キャラセレ画面ごとに1シーンにすれば
画面ごとのデバッグも容易になるかと思います。

ライブラリのコアのソース、enchant.jsは
最適化もしていない生の状態でも2700行ほどのライブラリーなので
リッチな機能はあまりありません。
主にWeb用のライブラリーなので、必要なものは別のソースで組んでインクルードするって思想なのかな?

次は、ちゃんとゲームっぽく始まりから終わりまでつなげます。。

theme : JavaScript
genre : コンピュータ

2011-10-29

jsdo.itテスト用

jsdo.itに登録してみた。
コードを公開できるらしいのでどんな風に見えるかのテストです。


デザインビューってこんな感じ

2011-10-29 3rd - jsdo.it - share JavaScript, HTML5 and CSS



コードビューってのはこんなの

2011-10-29 3rd - jsdo.it - share JavaScript, HTML5 and CSS


theme : JavaScript
genre : コンピュータ

2011-10-27

動くものができました

仕事の合間に何とかお勉強・・・

とりあえず何か動く状態になったので
テストでここにあげてみました。

なんかボールとか謎の赤いのをクリックすると飛んでいくものを作ってみたけど
まったくコンセプトが見えてこない(笑)

スプライトみたいに画像回転や拡大縮小が簡単にできないかと
思っていろいろやってみたけどいまいちわからなかった・・・

仕方がないので、何かすでに世に存在するゲームから
手法を盗もうと探していたら
4gamerにちょうどいい記事があったので参考にしました。
http://www.4gamer.net/games/032/G003263/20110428001/

これはちょっといい感じなエンジンなんじゃないかと思い
お勉強中です。
このエンジンはスマホ向けの開発環境が整っているのがよいですね。

スマホ向けゲームに使おうと思っているミドルウェアのUnityを勉強中ですが、
こちらにも興味がわいてきました。

次はスプライトの機能を使って何か実装します。

theme : JavaScript
genre : コンピュータ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。