どのようにCocos 2 d-JSで急速に1つの微信のゲーム《ニャンコ星のあなたから》を開発します
5940 ワード
(via:
Cocosエンジン中国語ステーション)
今日はCocos 2 d-JSエンジンを使って、微信ゲーム「ニャンコから来たあなた」を迅速に開発する方法を紹介します.
ゲームアドレス(携帯電話でアクセスすることを推奨):
http://app8.download.anzhuoshangdian.com/cat/
ソースアドレス:
https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/html5/how-to-make-a-cat-game/res/Catnorris-master.zip
1.Cocos 2 d-JSエンジン
Cocos 2 d-JSエンジンはCocos 2 d-xのJSバージョンであり、APIの設計を大幅に簡素化し、統合し、ゲーム開発をこれまでにないほど楽にしています.Webプラットフォームに頼ってCocos 2 d-JSに効率的な開発テスト環境を享受させ、コマンドラインツールは3段階でWebとNativeの全プラットフォームの配置を解決できる便利な機能を提供する.
公式ダウンロードアドレス:
http://cn.cocos2d-x.org/download/
公式ガイド:
http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/html5/zh.md
2.Cocos Code IDE
Cocos Code IDEはEclipseベースのプラットフォーム間IDEであり、開発者がゲームエンジニアリングを容易に作成し、デバッグコードを作成し、修正効果をリアルタイムで表示し、最終的に直接棚に載せることができるインストールパッケージを公開するのに役立ちます.
公式ダウンロードアドレス:
http://cn.cocos2d-x.org/download/
公式JSガイド:
http://cn.cocos2d-x.org/tutorial/show?id=1173
3.ゲーム
「ニャンコから来たあなた」の主役はニャンコです.彼の使命は危険な地球上で汪星人を取り除くことです(なぜこの2つの星の主戦場が地球上に設置されているのか、私も納得していません.これらの細部を気にしないでください...)、脇役は絶えず発生する汪星人の群れで、プレイヤーはニャンコ人の移動と攻撃をコントロールして汪星人を避けたり倒したりする必要があります.負かすほど点数が高くなります.もしニャンコ人が負かされたら、ゲームが終わります.この時、あなたの成績を友达に分かち合うことができます.誰よりも牛です.
ゲームは、さまざまなゲーム内のオブジェクトが設定した論理やユーザーのインタラクションに基づいて一連のアニメーションを実行することにほかならない.それが分かったので、微信でぼろぼろになった「ニャンコから来たあなた」を開発し始めました.少し興奮しているのではないでしょうか.
まず、このゲームの構造を簡単に紹介します.
A.メインメニューではなく、ごちゃごちゃしたものではなく、ゲームに入ると遊び始め、簡潔にすればするほどユーザーを捕まえることができます.
B.ゲームのメイン画面、プレイヤー操作画面とスコアラベル.
C.ニャンコは一匹しかいません.汪星人は時間とともにずっと生まれています.
D.ゲーム終了はゲーム終了の画面を表示し、再プレイしても共有できます.だからこれは単シーンゲームです.
1)window.onload関数はCocos 2 d-JSゲームの入口です.
ここでは、リソースをロードしてゲームシーンに入ります.
cc.LoaderScene.preload([[catnorrisd.png],[pg.png],[arrow.png],[end.png]],function()/ロードリソースcc.director.runScene(new MyScene());//リソースをロードしてコールバックし、シーンに進む
MySceneはゲームのメインシーンで、MySceneはccから.Sceneが受け継いだ.ゲームに入ると、エンジンがonEnter関数を呼び出すので、onEnter関数でゲームシーン全体のUIを初期化したり、タッチに関する論理を処理したりすることができます.
2)スコアラベルの作成
たとえば、スコアラベルを作成するのは簡単です.ラベルのプロパティを初期化し、シーンに追加するだけです.
this.scoreLabel = UI.scoreLabel = new cc.LabelTTF(「0」,「黒体」,24,cc.size(150,30),cc.TEXT_ALIGNMENT_LEFT);//Label の作成
this.addChild(this.scoreLabel);//シーンに追加
this.scoreLabel.attr({//属性設定 x:30,
y:cc.director.getVisibleSize().height - 25,
strokeStyle: cc.color(0,0,0),
lineWidth: 2,
color: cc.color(255,150,100),
anchorX:0.1
});
3)タッチロジックの処理
ユーザーのタッチをキャプチャするにはどうすればいいですか?Cocos 2 d-JSはゲームのシーンで呼び出すだけで便利なインタフェースを提供しています
cc.eventManager.addListener
次の3つの関数を書き換えればいいです.
onTouchBegan:function(touch, event);
onTouchMoved:function(touch, event);
onTouchEnded:function(touch, event);
この3つの関数は,タッチを扱う3つの時点であることがネーミングから分かる.ここで注意しなければならないのは、タッチする時間によってユーザーが長押しするかクリックするかを判断し、長押しするとニャンコが移動し、クリックするとニャンコが攻撃することです.ターゲットポイント座標はどのように取得しますか?touchパラメータ暴露よ..
touch.getLocation();
4)主役登場
ニャンコはついに出てきて、ニャンコを操作しやすいように、私たちはそれをクラスCatにカプセル化して、ccから.Spriteが受け継いだ.ctor構造関数はニャンコの状態を初期化した.
ctor:function(){
this._super("catnorrisd.png", cc.rect(144,148,70,32));//初期化テクスチャは、ピクチャと理解できる
this.attr(//属性設定 anchorX:0.5,
anchorY:0
});
this.scheduleUpdate();
this.idle();
},
5)ステータスマシン
上のコードから、scheduleUpdate()とidle()を呼び出す奇妙な関数が2つ見られますが、何に使いますか?ここではニャンコをステータスマシンモードに設定します.ニャンコ星人の可能ないくつかの状態、idle、walking、attacking、dieing、deadを与えた.
this.idle()/ニャンコがidle状態に入るように設定
同じ呼び出しwalk()やattack()などもニャンコの状態を切り替えます.では、これらは状態の切り替えにすぎず、どのようにこれらの状態を表現しますか?
this.scheduleUpdate();//これはタイマーで、フレームごとにupdate関数を呼び出し、私たちは異なる状態に基づいてニャンコ人の表現を処理します.
このときwalkの状態であれば、猫は左右に揺れる動作をします.
this.runAction(cc.sequence(cc.rotateTo(0.12, -3), cc.rotateTo(0.12,3)).repeatForever());
cc.rotatetettoは回転動作です.Sequenceは2つのrotateToを接続して順番に実行する連続動作です.repeatForeverはこの動作サイクルが行われることを示している.
同様に,2種類のわん星人DogeとHuskyもステータスマシンのモードにカプセル化され,その後はマネージャーオブジェクトが統一的に管理され,マネージャーオブジェクトが主に行うことはタイミング的にわん星人を生成することである.
6)衝突検出
衝突検出はフレームごとに行われ、主役のニャンコは精霊で、ゲームから見れば矩形のテクスチャにすぎず、汪星人も同じように、透明な場所があっても.そこでここでは、ニャンコ人の位置と汪星人の位置を検出し、距離が設定した値を下回ると衝突と判定します.
if(cc.pDistance(this.target.getPosition(),this.getPosition())
...//衝突ニャンコが負かされると、ゲームインタフェース、すなわちUIオブジェクトが表示されます.ここではゲームを再開したり、微信で共有したりすることができます.
7)微信共有
このようなトーチカのゲームはどうして微信の共有機能が少なくなったのだろうか.共有機能のコードはindexで使用できます.htmlに表示されます.
Api.shareToFriend(wxFriend, wxCallbacks);
Api.shareToTimeline(wxData, wxCallbacks);
Api.shareToWeibo(wxData, wxCallbacks);
その中でwxFriend.descとwxData.descはコンテンツ記述を表し、ゲーム終了時に修正することができます.他のフィールドも、リンク、アイコンなど、ここで変更できます.
document.title = window.wxData.desc=「ニャンコブラシ!ニャンコゲット」+UI.score+「点、衆にゃん中ランキング」+(0|(percent*100)+「%、にゃんを超えられるか!」;
document.title = window.wxFriend.desc="いただきます"+UI.score+「分、勝った」+UI.pg+“个汪,超越了”+(0|(percent*100)+“%的朋友!你能超越我吗”;
4.まとめ
「ニャンコから来たあなた」はjsファイル1つで済み、Cocos 2 d-JSエンジンを使うことでJSゲームを効率的かつ迅速かつ容易に開発することができ、Cocos 2 d-JSとCocos Code IDEさえあれば、簡単かつ迅速に面白い優れたゲームを作ることができます.
現在、微信ゲームプラットフォームは国内で最も人気のあるプラットフォームの一つとなり、多くの成功作品が誕生している.Cocos 2 d-JSとCocos Code IDEにより,開発者は煩雑な工程に別れを告げ,開発をより効率的にすることができる.次の微信の大ヒット作はあなたのものかもしれません.
ソースのダウンロードアドレス:
https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/html5/how-to-make-a-cat-game/res/Catnorris-master.zip