本チュートリアルの動画をYouTubeから試聴しながらの学習をお奨めしております。
目次
- 概要
- Chapter01 - 新規プロジェクトを作成する
- Chapter02 - ユーザー入力を受け取る
- Chapter03 - Scriptの追加
- Chapter04 - 弾のEntityを作成する
- Chapter05 - 戦車から弾を発射する
- Chapter06 - 向いている方向に弾を撃つ
- Chapter07 - 敵を作る
- Chapter08 - ゲームを公開する
概要
このチュートリアルでは、PlayCanvas の基本機能であるキーボード入力やオブジェクトのクローン、衝突判定などを使って 3Dタンクゲームを構築し、PlayCanvas エディターの簡単な使い方について理解を深め、公開することを目的としています。
以下のようなコンテンツが出来ます。
PlayCanvas アカウントをまだ作成していない場合は、3分でアカウント作成から3Dモデルビュワーまで体験ができるチュートリアルがございますので、まずはこちらから参照ください。
→ https://support.playcanvas.jp/hc/ja/articles/4404199480089
Chapter01 - 新規プロジェクトを作成する
まずは、プロジェクトを作成しましょう。
あらかじめスタートのプロジェクトを用意していますので、それを FORK (複製)して始めます。
こちらのプロジェクトにアクセスし、フォークしてください。 フォークすると PROJECT NAME を聞かれるので、好きな名前を入力して FORK してください。
フォークが終わると、自分のプロジェクトとして複製されます。これでプロジェクトの作成は終了です。
次は EDITOR ボタンをクリックしてエディター画面へ進みます。
Chapter02 - ユーザー入力を受け取る
スペースキーを入力したら戦車が弾を発射するような処理を追加しましょう。 ユーザー入力と弾の発射を制御するスクリプト、弾の挙動を制御するスクリプトをそれぞれ作成します。
ASSETS 内の「src」フォルダを選択し、 ボタンから Script を新規作成します。
「shot.js」、「bullet.js」をそれぞれ作成してください。(※「.js」は自動で付与されます。)
Chapter03 - Scriptの追加
弾は戦車から発射されるため、shot.js を戦車のコンポーネント(部品)に追加します。
HIERARCHY(ヒエラルキー) から「Tank_base」を選択して、INSPECTOR 内の SCRIPTS コンポーネントに ADD SCRIPT から「shot.js」を追加します。
「shot.js」が追加されたことが確認できたら、Edit を選択して Code Editor を起動します。
スクリプト作成時は上記画像のようなコードが予め記述されています。
スクリプトの構造に関して、詳しくはこちらをご参照ください。
shot.js はユーザー入力を受け取り弾を発射するスクリプトなので以下のように記述します。
var Shot = pc.createScript('shot');
// initialize code called once per entity
Shot.prototype.initialize = function() {
};
// update code called every frame
Shot.prototype.update = function(dt) {
if(this.app.keyboard.wasPressed(pc.KEY_SPACE)){
//Spaceキーを押したら
this.shot();
}
};
// swap method called for script hot-reloading
// inherit your script state here
Shot.prototype.swap = function(old) {
};
Shot.prototype.shot = function(){
//弾を発射する
console.log("shot!");
};
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/
弾はまだ準備していないのでここでは console.log に " shot! " と出力するようにします。
保存したら PlayCanvas エディター に戻り、Launch ボタンをクリックし実行してみましょう。
Launch が立ち上がったら、ブラウザのデベロッパーツールを起動しましょう。
Windowsの方は「 F12 」キー、 Macの方は「 command + option + I 」キーを押すと起動します。 デベロッパーツールが起動したら、 console タブを開きます。
スペースキーを押すと console に " shot! " と出力されることを確認します。
Chapter04 - 弾のEntityを作成する
次は発射する弾を作っていきましょう。
ヒエラルキーの Root を選択して、ボタン から Root 直下に Sphere を作成します。
Sphere 作成後、INSPECTOR から name を「 bullet 」に変更し、Scale を調整します。
Scale
x : 0.5 , y : 0.5 , z : 0.5
デフォルトだと、色合いが弾っぽくないので、弾の Material を作成し適用します。
ASSETS から mats フォルダーを選択して ボタンから Material を新規作成し、「bulletMat」と名前をつけます。
作成後、bulletMat の DIFFUSE (ディフューズ)から Color をお好みの色に調整してください。
ここでは黒っぽい Material にします。
ヒエラルキーから bullet を選択し、INSPECTOR 内の ADD COMPONENT から SCRIPT を追加します。
「bulletMat」を RENDER コンポーネントの Material に、「bullet.js」を script コンポーネントにそれぞれアタッチします。
最後に弾の挙動を「bullet.js」に記述します。bullet.js を Code Editor で開き、以下のように記述します。
var Bullet = pc.createScript('bullet');
// initialize code called once per entity
Bullet.prototype.initialize = function() {
};
// update code called every frame
Bullet.prototype.update = function(dt) {
//z軸方向に1ずつ移動する
this.entity.translate(0,0,0.1);
};
// swap method called for script hot-reloading
// inherit your script state here
Bullet.prototype.swap = function(old) {
};
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/
Launch 画面を更新したら 1発だけ " 弾 " が飛んで行くことが確認できたら成功です。
Chapter05 - 戦車から弾を発射する
キーボード入力が取得できて、弾のエンティティが作成できたので、次はその2つを結び付けます。 PlayCanvas には テンプレート という機能(Unityでいう Prefab 機能)があるので、bullet のテンプレートを作成し、スクリプトからインスタンシングします。
shot.js を以下のように書き換えます。
var Shot = pc.createScript('shot');
Shot.attributes.add("bulletTemplate",{type:"asset",assetType: 'template'});
// initialize code called once per entity
Shot.prototype.initialize = function() {
};
// update code called every frame
Shot.prototype.update = function(dt) {
if(this.app.keyboard.wasPressed(pc.KEY_SPACE)){
//Spaceキーを押したら
this.shot();
}
};
// swap method called for script hot-reloading
// inherit your script state here
Shot.prototype.swap = function(old) {
};
Shot.prototype.shot = function(){
// //弾を発射する
//bullet のテンプレートからインスタンスを作成
var instance = this.bulletTemplate.resource.instantiate();
//rootの子に加える
this.app.root.addChild(instance);
};
shot.js のスクリプト属性に "bulletTemplate" という値を {type:"asset",assetType:'template'}
で追加します。※スクリプト属性に関して、詳しくはこちらをご参照ください。
保存後、Tank_base に設定した shot.js の 「Parse」 ボタンを押します。
shot.js に Asset 属性の bulletTemplate が表示されます。これにより、スクリプトを変更せず、エディターから 弾 ( bullet ) を設定できるようになります。
続いて、bullet エンティティをスクリプトから複製できるようにテンプレート化します。
ヒエラルキーから bullet を選択し、右クリックから Template > New Template をクリックします。
すると Assets に「bullet」というテンプレートが作成されます。このアセットが bullet エンティティ のテンプレートです。
テンプレートが作成できたら、shot.js に先ほど追加された bulletTemplate の項目へ、作成したテンプレートをドラッグ&ドロップでアタッチします。
実行後、スペースキーを押すと、戦車の位置から一方向に弾が発射されることが確認できます。
Chapter06 - 向いている方向に弾を撃つ
戦車の向いている方向に弾を撃つような処理を記述して行きます。
戦車の向いている方向は Tank_base(entity).lookAtFor に vec3 型であらかじめ以下のように格納されています。
▼Tank_base
▼ lookAtFor
x : 0.87155…
y : 0
z : 0.60819…..
この値を利用して弾の進行方向を変更します。
bullet.js を開き、以下のように書き換えます。
var Bullet = pc.createScript('bullet');
// initialize code called once per entity
Bullet.prototype.initialize = function() {
//tankの情報を取得
var tank = this.app.root.findByName("Tank_base");
//Tank_baseを探してlookAtForをthis.lookatforに代入する
this.lookatfor = tank.lookAtFor;
//タンクの座標を取得
var tankPosition = tank.getLocalPosition();
this.entity.setLocalPosition(tankPosition.x,tankPosition.y+0.5,tankPosition.z);//bulの位置をタンクの座標に合わせる
};
// update code called every frame
Bullet.prototype.update = function(dt) {
//向いている方向に飛ばす
this.entity.translate(this.lookatfor);
};
// swap method called for script hot-reloading
// inherit your script state here
Bullet.prototype.swap = function(old) {
};
保存して実行すると、向いている方向に弾が発射されることが確認できると思います。
Chapter07 - 敵を作る
弾をぶつける敵を作ります。
ヒエラルキーから Root を選択して、ASSETS の models → UFO フォルダ内の PH_ufo を SCENE にドラック&ドロップします。
Template アセットをドラッグ&ドロップしてください!
PH_ufo の INSPECTOR を操作して以下のように設定します。
Entity
Position : x : -10, y : 0, z : 10
ADD COMPONENT
Collision
Type : Box
Half Extents : x : 1, y : 0.5, z : 1
Scripts
+ADD Script
+Create Script
[enemy.js]
enemy.jsを以下のように記述します。
var Enemy = pc.createScript('enemy');
// initialize code called once per entity
Enemy.prototype.initialize = function() {
//衝突判定のイベントを設定
this.entity.collision.on("triggerenter", this.death, this);
};
// update code called every frame
Enemy.prototype.update = function(dt) {
//回転する力を加える
this.entity.rotate(0,1,0);
};
// swap method called for script hot-reloading
// inherit your script state here
Enemy.prototype.swap = function(old) {
};
Enemy.prototype.death = function(result){
console.log(result);
if(result &&
result.name === "bullet"){
//衝突したコリジョンを持った相手の名前が"bullet"だったら
this.entity.destroy();//自分自身をdestroy
result.destroy();//衝突した相手をdestroy
}
};
最初の状態だと、bullet はコリジョン(剛性)を持っていないので、 collision と rigidbody を追加し INSPECTOR を操作して以下のように設定します。
Collision
Type : Sphere
Radius : 0.25
Rigid body
Type : Kinematic
設定後、INSPECTOR が以下のように表示されますので、右上の APPLY ALL を選択してテンプレートを上書きします。
実行して、弾が衝突すると UFO が消えることが確認できたらOKです。
bullet の作成は完了したので、ヒエラルキーにある bullet は削除して下さい。
enemy が一体だけでは面白みがないのでヒエラルキーの Duplicate Entity から複製して、たくさん配置してみましょう。
UFOの子要素を直接編集しないようにしてください!
Chapter08 - ゲームを公開する
ゲームが完成したので、公開用のURLを作成します。
SCENE 内の ManageScenes からゲームを PUBLISH します。
BUILDS&PUBLISH タブから PUBLISH TO PLAYCANVAS を選択します。
諸情報を入力して PUBLISH NOW を選択すると、URL が発行されます。
発行された URL からゲームを遊ぶことができます。
たくさんシェアしてたくさん遊んでもらいましょう!
コメント
0件のコメント
サインインしてコメントを残してください。