スポンサーサイト

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

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

14-3.Monaca+enchant.js開発(かぶを吹っ飛ばす)

さて、「無限かぶぬき」はenchant.jsを使ってつくりましたが、どんなソースを書いたか少しずつご紹介しています。

前回の記事で上向きにスワイプすると、少しずつかぶが上に動くような仕組みを作りました。
どんどん上に動き、土から離れたかぶは、「ぬいた勢いで上に吹っ飛ぶ」という風にしてみました。

「吹っ飛ぶ」と言っても、「上のほうにシューっと移動する」「徐々にうすくなる」「画面からはみ出て消える」「シュッと音を鳴らす」みたいなことです。

---------------------------------------
var rnd = Math.floor( Math.random() * 2 );
kabu.tl
.fadeOut(10)
.and()
.moveBy((rnd==0)?200:-200,-200,10)
.then(kabuReset);
----------------------------------------

fadeOut(10)が10フレームかけてフェードアウトする(薄くなって消える)。
moveBy(200,-200,10)が(200,-200)の位置まで10フレームかけて移動する。
kabuResetはかぶが消えたあと新しくかぶをセットする処理を書いたファンクションです。
var rnd = Math.floor( Math.random() * 2 );というところで乱数を発生させて、
(rnd==0)?200:-200というところで右上に飛んでいくか、左上に飛んでいくかをランダムで振り分けています。

kabu0000.jpg kabu0001.jpg kabu0002.jpg


あとは別のアプリで使った技術のと同じです。
音を鳴らすところはこちらの記事、乱数を発生させるところはこちらの記事で詳しく書いています。

効果音もつけて、「ぬいた勢いで上に吹っ飛ぶ」というのが表現できました。
実際に動かしてみたいかたはアプリをダウンロードしてみてくださいね!→「無限かぶぬき

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
スポンサーサイト

14-2.Monaca+enchant.js開発(スワイプでかぶを動かす)

enchantの基本的な使い方というのは色んなサイトで紹介されています。
enchant.js 怒涛の 100 tipsとか。独学にもってこいですね。
enchant.jsのダウンロードするところから知りたいんだけど!というかたはこちらのサイトなど、いろんなところで紹介されているので、参考にしてみてください。


そんなサイトでちょこちょこ勉強しつつ作っています。
今回の「無限かぶぬき」では、2歳の息子が最近できるようになったスワイプ(スライド?)の操作を使っています。
「上向きのスワイプでかぶを動かす」という部分を解説します。


Sprite(スプライト)という画像表示クラスがあるのですが
kabuという名前でスプライトを定義して、最初の位置に配置したのち、こんな感じのコードを書きました。
---------------------------------------
var kabuStartPoint = 0;

scene.addEventListener('touchstart',function(e){
//タッチし始めの位置を記録
kabuStartPoint = e.y;
});

scene.addEventListener('touchend',function(e){
//上に動いたか
if( (kabuStartPoint - e.y ) > 0 ) {
//かぶをずらす
kabu.y -= 15;
}
});

----------------------------------------

touchstartというイベントでタッチし始めたときのイベントが拾えます。
touchendでタッチし終わりです。

touchstartで位置を記録しておいて、touchendで上に動いたかを判定しています。
なのでタッチし始めたときの位置よりタッチし終わったときの位置が上なら「上にスワイプ」ですね。
上にスワイプでkabuスプライトを上にちょっとずらす。

001.png 002.png

初心者でもできそうでしょ?
できましたよー。ふふふ。
息子もかぶが吹っ飛ぶのが面白いみたいで、ゲラゲラ笑いながら「うんとこしょ!どっこいしょ!」と、楽しんでいます。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

14-1.うんとこしょ!「無限かぶぬき」をリリースしました

7月8月はキャンペーンの上限狙いで10本ほどアプリをリリースしました。
キャンペーンも終わったので、今月はこんな活動をしていました。

-----------------------------------------------------
1.他のアドネットワークの広告をMonacaアプリにつけられるのか検証 
キャンペーン中はnend広告をつけなくてはいけなかったのですが、キャンペーンが無事終わったので、今後リリースするアプリは他のアドネットワークを使ってもいいわけです。
Monaca開発のアプリは、普通のAndroidアプリ用広告がつけられない場合が多いので、どんなタイプならMonaca開発アプリつけられるのか調査や検証をしていました。難航しています。結局nendに落ち着くかも。
有益な情報が得られたらまた記事を書きますね。


2.Amazonアプリストアでどう活動するか検証
こちらのカテゴリで書いています。
有料アプリでいくか、海外へも公開するか、Amazon用の広告対策などを引き続き検証中です。


3.正式版Monacaを試す
こちらのカテゴリに書いています。
Monacaがベータ版から正式版になったのでいろいろためしてました。
突如動かなくなったプロジェクトがあったのでドタバタしましたがなんとか解決しました。


4.プロモーション活動
先月に引き続き、プロモーション活動もしています。
主にアプリを紹介するようなサイトに、掲載を申請しています。そう簡単には載らないですね。
これまでの掲載実績はこちらのカテゴリに書いています。
-----------------------------------------------------


という感じで、このままだと今月は1本もアプリをリリースしないまま終わってしまいそうだったので、1本サクッと簡単に作ってみました。
ゲーム開発用フレームワーク「enchant.js」を「いやいや期物語」で使ったのですが(こちらのカテゴリで詳しく紹介しています。)、このようなノベルゲームとして使うのはどちらかというとマイナーな使い方で、実際よく使われるのはキャラクターを動かしたりするようなゲームだよなーとずっと思っていたのです。
そっちの使い方でゲーム作ってないな、と。

というわけで、最近の息子のお気に入り絵本「おおきなかぶ」からヒントを得て、「ただただ、かぶを延々ぬき続ける」というゲーム「無限かぶぬき」をリリースしました!
001.png

うちの息子がよく絵本の「おおきなかぶ」のマネッコをして、ぬいぐるみとかをかぶに見立てて
「よいしょ、よいしょ!それでもかぶは、ぬけまちぇん!」
とかやっているので、アプリも喜ぶかなと思った次第です。
これです。↓有名な絵本。


あと、息子(2歳児)のタブレットの操作としては、これまでタップだけだったのが、最近スワイプ(スライド?)の操作ができるようになったので、それを見て「これは!」と思い、上向きにスワイプするとかぶが上に動くような仕組みにしました。
あとは音を鳴らしたり、ぬいたかぶが吹っ飛んだり(子供は吹っ飛んだりするの大好きです)する動きをつけたり。
ほぼこれだけです。
超簡単でシンプルなかぶぬきゲームアプリができました。

こちらからダウンロードできます。
無限かぶぬき


ここまでシンプルに仕上げていると、enchantを使ったゲームの「初心者向けサンプルソース」としてはもってこいだと思うので、次回以降、少しソースの解説をしますね!
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

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