Rokid Air AR 眼鏡 && Cocos Creator XR 開發(fā)筆記
硬件設(shè)備
Rokid Air 眼鏡：
https://air.rokid.com/
支持進(jìn)入AR模式的 Android 手機(jī)：
https://air.rokid.com/userguide
軟件
Rokid Air App :
在Rokid Air app 1.9.1版本上有部分不兼容問題，請確認(rèn)不要使用此版本的Rokid Air app進(jìn)行調(diào)試和發(fā)布，之前的版本和1.9.2或以后的版本將不受影響；
直接從官網(wǎng)上下載，各大應(yīng)用市場可能更新有滯后。
https://air.rokid.com/download
Cocos Creator 3.6.1
https://www.cocos.com/creator
安裝配置安卓環(huán)境
https://docs.cocos.com/creator/manual/zh/editor/publish/setup-native-development.html
XR 插件：
https://store.cocos.com/app/detail/4117
投屏（可選
adb tcpip + scrcpy
Rokid AIR 投屏方案（Win）：https://ivb750bbcz.feishu.cn/docs/doccniMDevcb6lgto0DzXPEn8Xe
Rokid AIR 投屏方案（Mac）：https://ivb750bbcz.feishu.cn/docs/doccndTeu2iDmQt7a2fSJqnpLvg
新建VR模版
打開?xr_main?場景，可以看到相機(jī)是掛在 XR HMD 這個節(jié)點(diǎn)下
場景空空，有點(diǎn)孤單，可以隨意添加一些3d物體，調(diào)節(jié)成你喜歡的角度和位置，確保在相機(jī)視野內(nèi)。
構(gòu)建發(fā)布
在菜單欄選擇?項(xiàng)目->構(gòu)建發(fā)布，發(fā)布平臺選擇?XR Rokid Air，第一次發(fā)布還需填上包名。首次構(gòu)建可能會慢點(diǎn)，后面再構(gòu)建就會更快了。
如果出現(xiàn)異常的話，一般來說是安卓環(huán)境相關(guān)配置有異常，可以查看構(gòu)建日志定位問題。
打開?{當(dāng)面項(xiàng)目}/build/xr-rokid/publish/release?，將包安裝到手機(jī)上。
效果預(yù)覽
安裝應(yīng)用后，直接打開是這樣的
需要接上AR眼鏡，在 Rokid Air App 中進(jìn)入 AR 模式。
在其應(yīng)用庫可以找到剛才安裝好的包。
打開后，晃動腦袋，可以看到我們之前添加的物體
此時手機(jī)上顯示的是游戲手柄
目前的資源包參考如下
helloworld.zip?(24.2 KB)
手柄輸入事件
為了更好的控制游戲，需要知道手機(jī)中的手柄事件。
Cocos Creator 中的監(jiān)聽事件代碼如下：
input.on(Input.EventType.GAMEPAD_INPUT, this._gamepadEvent, this);
獲取手柄輸入?yún)?shù)如下
private _gamepadEvent(event: EventGamepad) {
const gamepad = event.gamepad;
}
gamepad 的成員可以在?cc.d.ts中看到。
可以簡單寫個腳本，驗(yàn)證搖桿參數(shù)返回。
import { _decorator, Component, input, Input, EventGamepad, Vec2, Label } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('GamepadEventTest')
export class GamepadEventTest extends Component {
@property(Label)
lb_leftStickValue: Label = null!
@property(Label)
lb_rightStickValue: Label = null!
start() {
input.on(Input.EventType.GAMEPAD_INPUT, this._gamepadEvent, this);
}
private _gamepadEvent(event: EventGamepad) {
const gamepad = event.gamepad;
const leftStickValue = gamepad.leftStick.getValue() as Vec2;
this.lb_leftStickValue.string = `${leftStickValue.toString()}`;
const rightStickValue = gamepad.rightStick.getValue() as Vec2;
this.lb_rightStickValue.string = `${rightStickValue.toString()}`;
}
}
并在場景中加入label節(jié)點(diǎn)驗(yàn)證輸出。
重新打包后預(yù)覽效果，可以看出搖桿的輸出結(jié)果
資源包如下：
helloworld-gamepad-event-test.zip?(194.1 KB)
頭戴顯示器姿態(tài)輸入事件
這個事件可以獲取到眼鏡的一些重要參數(shù)，如旋轉(zhuǎn)角度，在定制眼鏡交互時可能會用到。
Cocos Creator 中的監(jiān)聽事件代碼如下：
input.on(Input.EventType.HMD_POSE_INPUT, this._dispatchEventHMDPose, this);
獲取輸入?yún)?shù)如下
private _dispatchEventHMDPose(eventHMD: EventHMD) {
const hmdInputDevice = eventHMD.hmdInputDevice;
}
相關(guān)的邏輯可以參考插件中的代碼?extensions/xr-plugin/assets/xr/component/device/pose-tracker.ts
將現(xiàn)有的游戲移植到 Rokid Air 眼鏡，用的是?cocos-example-projects/simple-games/assets/simple-shooting 這個demo
下載好工程后，找到主場景，導(dǎo)出資源包。
這里已經(jīng)導(dǎo)出了資源包，如下所示：
鏈接:?https://pan.baidu.com/s/1VRZyn3gAWF0Y6vsYdImFmg?pwd=6qce?提取碼: 6qce 復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機(jī)App，操作更方便哦
再導(dǎo)入到helloworld 中
切換到shooting game 的場景中，找到主相機(jī)，轉(zhuǎn)成?XR HMD
構(gòu)建參數(shù)選擇當(dāng)前新的場景
鏈接眼鏡，打開應(yīng)用后，效果如下圖所示：
剩下的問題就是調(diào)整參數(shù)，接入輸入事件，修改腳本assets/simple-shooting/scripts/ShootingPlayerController.ts?核心參考代碼如下：
//input.on(Input.EventType.GAMEPAD_INPUT, this._gamepadEvent, this);
//input.on(Input.EventType.HMD_POSE_INPUT, this._dispatchEventHMDPose, this);
private _dispatchEventHMDPose(eventHMD: EventHMD) {
const hmdInputDevice = eventHMD.hmdInputDevice;
const _quatPose:Quat = hmdInputDevice.headMiddleOrientation.getValue();
_quatPose.getEulerAngles(tempVec3_a);
const horizontalRot = this.node.getRotation();
horizontalRot.getEulerAngles(tempVec3_b);
tempVec3_b.y = tempVec3_a.y;
this.node.setRotationFromEuler(tempVec3_b);
if (-tempVec3_a.x > this.viewDownAngle && -tempVec3_a.x < this.viewUpAngle) {
const verticalRot = this.verticalViewNode.getRotation();
verticalRot.getEulerAngles(tempVec3_b);
tempVec3_b.x = -tempVec3_a.x;
this.verticalViewNode.setRotationFromEuler(tempVec3_b);
}
}
aValue = false;
bValue = false;
private _gamepadEvent(event: EventGamepad) {
const gamepad = event.gamepad;
const leftStickValue = gamepad.leftStick.getValue() as Vec2;
if(this._velocity.z !=leftStickValue.y && this._velocity.x!=-leftStickValue.x){
this._velocity.z = leftStickValue.y;
this._velocity.x = -leftStickValue.x;
if(leftStickValue.lengthSqr()>0){
this.changeToAnimState(PlayerAnimState.Running);
}else{
this.checkToIdle();
}
}
if (gamepad.buttonSouth.getValue() === 1 && !this.aValue) {
this.aValue = true;
this.doAction(ActionType.Shoot,true)
} else if (gamepad.buttonSouth.getValue() === 0) {
this.aValue = false;
}
if (gamepad.buttonEast.getValue() === 1 && !this.bValue) {
this.bValue = true;
this.doAction(ActionType.ThrowGrenade,true)
} else if (gamepad.buttonEast.getValue() === 0) {
this.bValue = false;
}
}
放上文章開頭接入的資源包供大家參考學(xué)習(xí)
鏈接:?https://pan.baidu.com/s/1dpvvTppaPFyvGqRzsyWEIA?pwd=3q68?提取碼: 3q68 復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機(jī)App，操作更方便哦
小結(jié)b站視頻：?https://www.bilibili.com/video/BV1bt4y1u7CS/
相關(guān)資源鏈接與討論見論壇：https://forum.cocos.org/t/topic/141564 ?(閱讀原文直達(dá))
點(diǎn)擊 “閱讀原文”跳轉(zhuǎn)至論壇討論
“點(diǎn)贊“ ”在看”?鼓勵一下
▼