freedom-man.com

ブログは俺のセーブポイント

Tag: JavaScript (page 1 of 3)

jsforceを使ったSalesforce便利TIPS

jsforceはメタデータ操作が他の言語のライブラリよりも扱いやすいので、手軽に高度なことができちゃいます。ということで便利なオレオレTIPSを備忘として残しておきますー

Continue reading

Google Analytics APIとD3.jsでアクセス数をビジュアライズ

Google Analytics APID3.jsでブログ記事ごとのアクセス数をビジュアライズしてみました。

Continue reading

ElectronでExactTargetのGUIツール作ってみた

ElectronでExactTargetのGUIツール作ってみました↓
Releases · tzmfreedom/ET_Tool

リファクタリングとかアイコンとか細かいところは完全無視してとりあえずリリース。

Continue reading

Angular.jsでBrowserify

Angular.jsでBrowserify対応するときに色々ハマったので、その備忘録。

Continue reading

Cocos2d-JSを触ってみた【BGM再生・キー入力・アニメーション・衝突判定】

今回もCocos2d-JSを色々と弄ってみます。

1. BGM再生

いつも通りresディレクトリ内に音声ファイルをぶちこんで、src/resource.jsを修正します。

あとはsrc/app.jsのLayerのctorに以下のコードを追記するだけで音楽が再生されます。

ちなみに、効果音再生は

って感じで行けます。

2. キー入力受付け

以下のようにcc.eventManagerにキーボード入力に対するイベントリスナーを追加するだけ。

あとは各キーコードに応じた処理をfunction内で定義すればOK。

3. アニメーション

RPGの歩行アニメーション的な永続的なアニメーションの場合は以下のようにして処理を書きます。

画像一枚32px * 32pxで横3縦4で配置されるキャラチップ画像を想定しています。

永続的なアニメーションなので、ループする画像のパターンを定義する必要があって

それがspritesの配列部分になります。

1→2→3→2→1→2→…と続くので1→2→3→2のループを定義しています。

キー入力とうまく組み合わせて、キャラの方向を検知して

アニメーションパターンを都度runActionで変更してあげればRPGっぽいキャラ移動が出来るようになります。

4. 衝突判定

前回やったタイルマップを使えば衝突判定を簡単に実装できます。

“レイヤー>タイル・レイヤーの追加”からレイヤーを追加します。

レイヤーの名前はcollisionとかにしてください。

collisionレイヤーの衝突判定を付けたいところに適当なタイルセットで塗っていきます。

わかりやすくするために黒とかの単色タイルセットを作って塗っていくと

後で衝突設定した場所がわかりやすいです。

cocos2djs-tmx-collision2

塗り終わったらレイヤーの透過度を0にします。

cocos2djs-tmx-collision1

src/app.jsで以下のようにして衝突判定を設定したセルを判定することができます。

確認したところではPointで設定する値は左下基準でしたが、もしかしたら設定で変えれるのかも。

 

Older posts

© 2017 freedom-man.com

Theme by Anders NorenUp ↑