タッチ処理:Three.jsで3Dブラウザゲームを作る その5

サンプルプログラム

Nengaです。今回はThreejsでのタッチ処理をご紹介いたします。

 

今までのサンプルでもスワイプで視点移動していましたが,あちらはorbitControlsという視点移動関数に全任せしていたものです。

独自の処理を行なうには関数を追加要なので,今回のサンプルを作成いたしました。(処理の衝突を防ぐため,視点移動機能はオフしています。)

 

スワイプ(ドラッグ)した方向にペギちゃんが移動し,指(マウス)を離すとペギちゃんが停止し,効果音が鳴ります。

当たり判定も入れてあり,炎に近づいてしまうと熱がり飼い主さんに近づくと甘えます

 

スポンサーリンク

サンプルプログラム:タッチ

サンプルプログラムを置きましたのでダウンロードお願いいたします。↓

 <サンプルプログラムをダウンロード> 

 

ダウンロードいただけたら,zip展開の上,jsの中にある「script.js」をローカルサーバーで実行方お願いいたします。ローカルサーバーでの実行方法は下記記事のとおりです。

サンプルのデモはこちらになります。


↑タップでデモ開始です。

サンプルプログラムのタッチ処理について

タッチ処理を用いてペギちゃんを移動させます。

スクウェアエニックス社のRPGアプリでよく使われる移動方法です。

①画面のどこかをタッチ(クリック)し・・・

②スワイプ(ドラック)でペギちゃんが動きます。

③指(クリック)を離すとペギちゃんが止まります。

タッチ処理の書き方

タッチ処理で使うイベントは4種類あります。

・画面をタッチしたとき
・画面をスワイプしたとき
・画面から指を離したとき
・タッチ処理がキャンセルとなったとき(電話がかかってきたとき等)

まず,それぞれに対応した処理(関数)を作ります。362~409行です。

function touchStart(tcx,tcy) {
 ・・・
}
function touchStart1(tcx,tcy) {
 ・・・
}
function touchEnd() {
 ・・・
}

※”touchCancel”がありませんが,これはtouchCancel時はtouchEndを呼ぶようにしているためです。(touchEndを共有で使います)

 

さらに,上記の関数を呼び出す処理を書きます。67~106行です。

container.addEventListener(‘mousedown’, function(event){
touchStart(event.clientX,event.clientY);
},{passive:false});

container.addEventListener(‘touchstart’,function(event){
・・・
touchStart(Math.floor(tcx),Math.floor(tcy));
},{passive:false});

マウス用とスマホ用を作っています。アプリがPCで実行された場合も,スマホで実行された場合も対応できるようにするためです。

スマホ用は指2本タッチに対応しているようで,若干処理が複雑になっています。

おまけ機能1:効果音

おまけ機能の効果音鳴動です。

効果音のデータを定義します。43~44行です。今回も余裕を見て256個作成します。

let soundMax=256;
let sound=[];

193行目で効果音をロードします。

sound[0] = new Audio(‘./data/cursor31.wav’);

touchEndの中に音を鳴らす処理を入れています。403行目です。

sound[num].pause();sound[num].currentTime = 0;sound[num].play();//音を鳴らす

これによって,指(クリック)を離したときに音が鳴ります。

 

おまけ機能2:当たり判定

414~428行にjudgeHitChara関数があり,これによってキャラクター同士の当たり判定を行なっています。

function judgeHitChara(NUM){
let length;
let tx,tz;
for(let i=0;i if(!chara[i].model)continue;
if(i==NUM)continue;

tx = chara[i].model.position.x-chara[NUM].model.position.x;
tz = chara[i].model.position.z-chara[NUM].model.position.z;
length = Math.sqrt(tx*tx+tz*tz)-(chara[i].hitLength + chara[NUM].hitLength);

if(length < 0)return i;
}
return -1;
}

処理は単純で,NUMが自分のIDとなり,for文にて全キャラクターと衝突判定を行ない,当たっていたキャラクターのIDを返り値として渡します。誰とも当たらなければ-1を返り値として渡します。

判定式は,positionのx軸とz軸から距離を求め,キャラクターごとのマージン値(半径。.hitLength)がマイナスになれば当たりと判定しています。

この関数を315行目で呼び出しています。飼い主に当たれば飼い主に甘えるメッセージを,炎に当たれば熱がるメッセージを表示します。

まとめ

Three.jsでタッチ判定するサンプルと,使用方法をご紹介させていただきました。

おまけ機能として効果音当たり判定もご紹介させていただきました。

(1)タッチの処理は4種類。
  ・画面をタッチしたとき
  ・スワイプしたとき
  ・離したとき
  ・キャンセル(スワイプ中に電話がかかってきた等)
(2)それぞれの処理について関数を作ります。
(3)addEventListenerに上記(2)の関数をそれぞれセットします。マウス用・スマホ用の両方を書きます。
(4)おまけ機能1「効果音」はsound[num].play();で鳴らせます。
(5)おまけ機能2「当たり判定」は,x‣z軸で差を見て判定します。

 

インターフェースまわりの地味な処理は,enchant.jsというゲームエンジンではちゃんとまとめられていて使いやすくなっているのですが,three.jsでは今回のようにガシガシ書いていかなくてはなりません。(もしくはインターフェース関連のライブラリを探してきてくっつける。)

 

enchant.jsがグラフィックの描画からインターフェースまで広くカバーしているのに対し,three.jsはグラフィックに特化したライブラリということがわかりますね。

フォント描画のご紹介のときもそう感じました。

 

お疲れさまでした。次回も何か機能追加して,ご紹介させていただきたく存じます。

サンプルプログラムの参考にさせていただいたサイト

・ics.media様(https://ics.media/tutorial-three/raycast/)
・TECH ACADEMY様(https://techacademy.jp/magazine/22789)

Nenga

コメント

タイトルとURLをコピーしました