digital for humanlife.

powered by PROMINENCE.tv

enchantとtmlibのタッチイベント

enchant.jsと、tmlib.jsのスプライトでは、発生するタッチイベント名が違う。

 

enchant.js

タッチ開始:ontouchstart

移動:ontouchmove

終了:ontouchend

中止:ontouchcancel

 

【例】

sprite.ontouchstart = (e)->

    console.log('x='+e.x+', y='+e.y) 

 

 

tmlib.js

タッチ開始:onpointingstart

移動:onpointingmove

終了:onpointingend

中止:onpointingcancel

 

【例】 

sprite.onpointingstart =(e)->

    console.log('x='+e.app.pointing.x+'y='+e.app.pointing.y)

 

tmlib0.3で音楽再生

tmlib0.3では、それまでの0.2までとは音楽の再生方法が変わっているようなので備忘録。

アセットリストに「sound」という名前で登録されているファイルを再生する場合

org = tm.asset.Manager.get('sound')

sound = org.clone()

sound.volume = 1.0

sound.play()

sound.loop = false

 

cloneしてからでないと重ねての再生が出来ないので注意。

JavaScriptでゲームパッド

もともとは「GamePad API」としてW3Cが制定しているものだが、なぜかブラウザー毎に実装がマチマチで、これまたブラウザー毎に処理を分けないといけない。
そして、2014年現在は、Chrome37と、Firefox31でしかゲームパッドは使用出来ない(SafariIEでは未実装)。

なので、実行しているブラウザを自動判別し、ChromeFirefoxの両方でほぼ同じデータの取れるものだけを配列で返すライブラリを作ってみた。

 

両方のブラウザでほぼ同じデータが取れるものは下記になる。

f:id:digitarhythm:20140830224336p:plain

 

ボタン1〜4に関しては各ゲームパッドによって違いはあるが、ボタンが4つあればボタン1〜4になっていると思われる。

ボタン5と6は、人差し指で押すボタンが返ってくる。
垂直軸と水平軸は−1、0、1の3つの値を返す。

さらに、Xbox360コントローラーでは2つのアナログスティックの値を−1〜1の範囲で返すようにしている。

しかし、アナログスティック1の値は垂直軸、水平軸の値とリンクしているので、アナログスティック1の値が振り切る(1、もしくは-1になる)と、十字キーを押したのと同じ状態になる。

Xbox360ではボタンは16個あるのだが、ファミコンもどきコントローラーとXbox360コントローラーで同じような値を返すのがボタン1〜6までなので、このライブラリではボタン6までしか値を返さない。

Xbox360コントローラーでは十字キーの値はボタンとして返ってくるのだが、ライブラリのほうで水平軸、垂直軸の値として返るように違いを吸収している。

 

ライブラリはgithubにあるので、普通にクローンすると使えるようになる。

 

digitarhythm/gamepadprocedure · GitHub

 

ファイル自体はCoffeeScriptなので使用する時はコンパイルしてご使用ください。

 

コンパイルしたファイル「gamepadprocedure.js」を読み込むと、「gamepadProcedure()」という関数が使用出来るようになるので、ゲームなどのループ処理内でこれを呼ぶことでゲームパッドの状態が配列として返ってくる。

SafariIEの場合は空の配列が返される。

 

GAMEPADINFO = gamepadProcedure()

 

上記のようにした場合、ゲームパッドがひとつの場合はGAMEPADINFO[0]ゲームパッド情報が格納されている(ゲームパッド番号=0)。

  • GAMEPADINFO[0].padbuttons
  • GAMEPADINFO[0].padaxes
  • GAMEPADINFO[0].analogstick

上記3つのオブジェクトはさらに配列になっていて、GAMEPADINFO[0].padbuttons[0]〜[5]にボタン情報が入っている。

GAMEPADINFO[0].padaxes[0]には、十字キーの水平軸情報が入っている(-1、0、1)。

GAMEPADINFO[0].padaxes[1]には、十字キーの垂直軸情報が入っている(-1、0、1)。

GAMEPADINFO[0].analogstick[0]には、アナログスティック1の情報が配列として入っている。

GAMEPADINFO[0].analogstick[0][0]には、アナログスティック1の水平軸情報が入っている(-1〜1)。

GAMEPADINFO[0].analogstick[0][1]には、アナログスティック1の垂直軸情報が入っている(-1〜1)。

GAMEPADINFO[0].analogstick[1]には、アナログスティック2の情報が配列として入っている。

GAMEPADINFO[0].analogstick[1][0]には、アナログスティック2の水平軸情報が入っている(-1〜1)。

GAMEPADINFO[0].analogstick[1][1]には、アナログスティック2の垂直軸情報が入っている(-1〜1)。

 

ChromeFirefoxではコントローラーの認識されるタイミングが違う。

FirefoxではファミコンもどきコントローラーでもXbox360コントローラーでも、Webアプリを起動した時には認識しておらず、ゲームパッドをなにかしら操作した時に認識される。

しかし、ChromeはどちらのゲームパッドでもWeb起動時に認識している。

動作的にはChromeのほうが好ましいのだが、一回認識してしまうとその後にUSBコネクタを何回抜き差ししても、最初に認識したゲームパッド番号がリセットされない。

例えば、Xbox360コントローラーを挿した状態でWebアプリを実行するとXbox360コントローラーがゲームパッド番号0として認識される。

その後にXbox360コントローラーを抜いてからファミコンもどきコントローラーを挿しても、ファミコンもどきコントローラーはゲームパッド番号1となりChromeを再起動するまでこの情報はリセットされない。

どちらにせよ、今の状態では複数ゲームパッドを使用したり、ゲームパッドの抜き差しなどはオススメしない。

enforce(enchant game framework)でシューティングゲーム

以前、Scratchで「Return to the earth」というゲームを作ったことがある。

Scratch2.0の新機能を確認するために作ったゲームなんだが、最初に作ろうと思った面を最後まで作りきれなかった。

そこで、enchant.jsを使ったゲームフレームワーク「enforce」でこれをちゃんと作ってみようと思う。

そして、Chromeアプリストアに有料で出してウハウハしよう(なんつって)。

とりあえずひな形を作ってみた。

カーソルキーの左右でシリンダーが移動して、「z」キーで弾を発射。以上(笑)

 ChromeSafari、ハイエンドのAndroid端末のChrome、iOS8.0以上のSafariで動くと思います。

スマホなどのタッチデバイスでは自機(シリンダー)を動かして弾を撃つことは出来ませんが :-P

iPhone/Androidスマホをゲームパッドにするぞ計画

家電量販店などに行くと、スマホタブレット用のゲームをプレイするための、Bluetoothコントローラーが売っています。

こんな感じ(Google画像検索)。

f:id:digitarhythm:20140718175542p:plain

 

しかし、ゲームがやりたい時に必ずコントローラーが近くにあるか?というと、ほとんどの場合は無いと思うんですよ。

私は普段、iPadはこういう状態で持ち歩いています。

f:id:digitarhythm:20140718185702j:plain

 

当然、ゲーム用のコントローラーなど持ち歩いていません。

そして、この状態だとiPadの画面を操作するタイプのアクションゲームも出来ません。

 しかし、私達は普段コントローラーに似たサイズのデバイスを持ち歩いているではないか、ということに気付いたわけです。

そうです、こういうやつです。

f:id:digitarhythm:20140718190221j:plain

 

これならば、ちょっとゲームがやりたくなった時にパっとスマホを取り出して、iPadのゲームをやって、終わったらスマホは充電するなり、ポケットに入れるなりすればコントローラーを持ち歩く必要ありません。

 

で、ゲームのBluetoothコントーラーとして使えるアプリを作ればいいジャマイカと思いますが、そうは簡単にはいかないのです。

ゲームのコントローラーには通常、方向指示ボタンがついています。

どこの誰が考えたかわかりませんが、これが実に良く出来ていて、私達はこれに完膚無きまでに、慣れさせられています。

そこで、スマホの画面に十字の絵を描き、それをコントローラーのごとく操作させようとすると・・・・これが上手くいかないんですねぇ。

なぜなら指先にまったくボタンを押している感触が無いので、指がどんどん十字の絵から離れていってしまうんですね。

そこで次に、「最初にタッチした場所を中心として上下左右を判断する」という方法を取ったアプリが出てきました。

これはまぁ最初の、なんにも考えていないコントローラーよりいくらかはマシでした。

一旦指を離してしまえば次のタッチでリセットされるのですから。

しかし、これもゲームを続けていくとイライラさせられることになります。

なぜなら、位置をリセットするためには指を一旦離さないといけないからです。

使いやすくするために導入した「一旦指を離す」という操作が、ゲームを続けているとイライラポイントに変わってしまうんですね。

そして、指を離せない場面というのも存在します。

アクションゲームで多いと思うのですが、動き回りながら敵を倒していくタイプのゲームだと指を離している暇が無いのです。

例えばこんなゲーム*1です。

f:id:digitarhythm:20140718182229j:plain

そうすると一番最初のなにも考えてない十字の絵と同じ現象が出てしまうのです(指がどんどん十字から離れていってしまう)。

このアンチノミーを解消するにはどうすればいいのか?

いつかAppleがこれを解決するベストソリューションを提供してくれると信じて待っていたのですが、全く出てくる気配すらありません。

それどころか、WebのアップルストアBluetoothゲームコントローラーを売ってる始末です。

では、どうすればいいか?と考えてみました。

まず、「十字の位置をリセットするために指を離す」を除外します。

そもそもゲームをやっている時に指を離さなければならないなどと言うことは、思考の邪魔以外のなにものでもありませんし、上記の理由により離すことが出来ない場面が往々にして訪れます。

しかし指先で十字を認識出来ない以上、指はどんどん画面上を移動していくので、どこかで位置をリセットしなければいけません。

 

そこで、「二回目に閾値を越えた量の位置移動があったらそこを中心点にする」という方法を考えてみました。

f:id:digitarhythm:20140718191003p:plain

上記の図で説明すると、まず最初にタップした位置を中心点として指の方向を取得します。

図の左で言うと「上方向」の処理を行います。

そしてそのままタップし続けるとずーっと「上方向」の処理をし続けますが、指の動きがある閾値を越えたところで、その時の指の位置を中心として十字コントローラーをリセットします。

例えば、画面をタップし指を上へ動かすと自キャラは上へ歩いて行きますが、指を動かすとリセットされるので自キャラは止まります。

しかしそれだと、方向を変えるためには一旦止めてから再び方向を指示するという形になり、タップし直してリセットとあまり変わりません。

 

そこで、方向を指示した後の指の動かす方向によって処理を分ければいいのではないかという考えに辿り着きました。

f:id:digitarhythm:20140718195311p:plain

おおまかに図にすると上図のようになります。

最初にタップした位置から上へ指を動かすと上方向への指示になります。

そこから閾値を越えて右へ指を動かした場合はそこを中心としてリセットし、右方向への指示とします。

左の場合はリセットして左方向への指示です。

下の場合は2段階になり、下に動かすとリセットされそこを十字の中心にします。

そこからさらに下に動かした場合は下方向への指示とするという感じです。

 

と、構想は出来ているので、あとはアプリを作るだけですね(笑)

 

インディカー テキサスファイアストーン600 最終結果

佐藤琢磨がエンジンブローした際のイエローでペナルティがあったらしく、最終結果が変わったとのこと。

 

  1. エド・カーペンター
  2. ウィル・パワー
  3. ファン・パブロ・モントーヤ
  4. サイモン・パジェノー
  5. スコット・ディクソン
  6. トニー・カナーン
  7. ミカエル・アレシン
  8. エリオ・カストロネベス
  9. ライアン・ブリスコー
  10. チャーリー・キンボール
  11. ジョセフ・ニューガーデン
  12. グレアム・レイホール
  13. カルロス・ムニョス
  14. ジェームス・ヒンチクリフ
  15. ジャック・ホークスワース
  16. カルロス・ウェルタス
  17. セバスチャン・サベードラ
  18. 佐藤 琢磨
  19. ライアン・ハンターレイ
  20. セバスチャン・ブルデイ
  21. ジャスティン・ウィルソン
  22. マルコ・アンドレッティ

 

が最終結果らしい。

 

XPERIA M

ワールドモデルのXPERIA MのOSアップデートが来ていたのでウホウホいいながらアップデートしてみた。

すると、なんと、貴重な、Android4.3!!!

f:id:digitarhythm:20140610184651j:plain

 

そして、なんと、WebGLに対応したっっっ!

f:id:digitarhythm:20140610221906j:plain

 

WebGLアプリを作るためにnexus5を買ったのに、XPERIA Mで事足りるようになってしまった。