เรียนรู้การพัฒนาแอพ Android เสมือนจริงตั้งแต่เริ่มต้น

บทความนี้จะแนะนำคุณเกี่ยวกับวิธีพัฒนาแอป Virtual Reality สำหรับ Android ตั้งแต่เริ่มต้น โดยถือว่าคุณทราบพื้นฐานของการพัฒนาแอป Android แล้ว

ความต้องการ

• Android Studio 1.0 หรือสูงกว่า
• เวอร์ชัน 19 ของ Android SDK
• อุปกรณ์ Android จริงที่ใช้ Android 16 (Jelly Bean) หรือสูงกว่า

ไฟล์ Manifest

 <แสดง ...

<uses-permission android:name="android.permission.NFC" />

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

 

<uses-permission android:name="android.permission.VIBRATE" />

...

<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="19"/>

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

<โปรแกรม

...

<กิจกรรม

android:name=".MainActivity"

android:screenOrientation="landscape">

...

 

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

<category android:name="com.google.intent.category.CARDBOARD" />

</intent-filter>

</activity>

</application>

</manifest>

อธิบายการอนุญาต:

• <uses-sdk android:minSdkVersion=”16″/> ระบุว่าอุปกรณ์ต้องใช้ API ระดับ 16 (Jellybean) หรือสูงกว่า
• <uses-sdk android:targetSdkVersion=”19″/> ระบุว่าแอปของเรากำหนดเป้าหมายไปที่ API ระดับ 19 (KitKat)
• <uses-feature android:glEsVersion=”0x00020000″ android:required=”true” /> ระบุว่าแอปใช้กราฟิก ดังนั้นต้องรองรับ OpenGL ES 2.0
• android:screenOrientation=”landscape” ระบุว่าการวางแนวหน้าจอที่ต้องการของกิจกรรมคือ “แนวนอน” นี่คือการวางแนวที่คุณต้องตั้งค่าสำหรับแอป VR มุมมองที่ใช้โดย Cardboard SDK, CardboardView จะแสดงผลในโหมดเต็มหน้าจอและแนวนอนเท่านั้น (แนวนอน, reverseLandscape, sensorLandscape)
• ขอแนะนำให้ ใช้การตั้งค่า android:configChanges=”orientation|keyboardHidden” แต่ไม่บังคับ
• Cardboard SDK ต้องได้รับอนุญาต android.permission.NFC เพื่อเข้าถึงแท็ก NFC ของ Cardboard
• android.permission.READ_EXTERNAL_STORAGE และ android.permission.WRITE_EXTERNAL_STORAGE Cardboard SDK ต้องการสิทธิ์เหล่านี้ในการจับคู่โทรศัพท์ของผู้ใช้กับแว่น VR
• แอพสาธิตของเราจำเป็นต้องได้รับอนุญาต android.permission.VIBRATE เพื่อให้โทรศัพท์สั่นเพื่อแจ้งให้ผู้ใช้ทราบว่ามีบางอย่างเกิดขึ้น
• ตัวกรองเจตนาและโดยเฉพาะ com.google.intent.category.CARDBOARD ระบุว่ากิจกรรมนี้เข้ากันได้กับผู้ชมที่เหมือน Cardboard แอป Cardboard ประเภทนี้ใช้หมวดหมู่นี้เพื่อแสดงรายการแอปที่เข้ากันได้ซึ่งติดตั้งอยู่ในโทรศัพท์ของผู้ใช้

ขยายกิจกรรมกระดาษแข็ง:

CardboardActivity เป็นจุดเริ่มต้นสำหรับการเข้ารหัสแอปกระดาษแข็ง CardboardActivity เป็นกิจกรรมพื้นฐานที่ผสานรวมกับอุปกรณ์ Cardboard ได้อย่างง่ายดาย โดยจะเปิดเผยเหตุการณ์เพื่อโต้ตอบกับ Cardboard และจัดการรายละเอียดหลายอย่างที่จำเป็นโดยทั่วไปเมื่อสร้างกิจกรรมสำหรับการแสดงผล VR

โปรดทราบว่า CardboardActivity ใช้โหมด Sticky Immersive ซึ่ง UI ของระบบถูกซ่อนและเนื้อหาจะกินพื้นที่ทั้งหน้าจอ นี่เป็นข้อกำหนดสำหรับแอป VR เนื่องจาก CardboardView จะแสดงผลเมื่อกิจกรรมอยู่ในโหมดเต็มหน้าจอเท่านั้น

Android 4.4 (API ระดับ 19) แนะนำการตั้งค่าสถานะ SYSTEM_UI_FLAG_IMMERSIVE ใหม่สำหรับ setSystemUiVisibility() ที่ช่วยให้แอปของคุณ "เต็มหน้าจอ" อย่างแท้จริง ค่าสถานะนี้ เมื่อรวมกับแฟล็ก SYSTEM_UI_FLAG_HIDE_NAVIGATION และ SYSTEM_UI_FLAG_FULLSCREEN จะซ่อนการนำทางและแถบสถานะ และให้แอปของคุณบันทึกเหตุการณ์การสัมผัสทั้งหมดบนหน้าจอ

กำหนด CardBoardView:

องค์ประกอบอินเทอร์เฟซผู้ใช้ทั้งหมดในแอป Android สร้างขึ้นโดยใช้มุมมอง Cardboard SDK สำหรับ Android มีมุมมองของตัวเอง CardboardView ซึ่งเป็นส่วนขยายที่สะดวกของ GLSurfaceView ที่สามารถใช้สำหรับการแสดงผล VR CardboardView แสดงเนื้อหาในรูปแบบสเตอริโอ คุณสามารถดูวิธีที่แอปสาธิตกำหนด aCardboardView ในไฟล์ xml ของเลย์เอาต์กิจกรรมด้วยวิธีต่อไปนี้:

 <com.google.vrtoolkit.cardboard.CardboardView    
แอนดรอยด์:fill_parent"    
android:layout_height="fill_parent" />

จากนั้นในคลาสกิจกรรมหลักจะเริ่มต้น CardboardView ในเมธอด onCreate():

 **
* ตั้งค่ามุมมองเป็น CardboardView และเริ่มต้นเมทริกซ์การแปลงที่เราจะใช้
* เพื่อแสดงฉากของเรา 
* @param ที่บันทึกไว้InstanceState 
*/
@แทนที่
โมฆะสาธารณะ onCreate (Bundle saveInstanceState) {    
super.onCreate(savedInstanceState);    
setContentView(R.layout.common_ui);    
CardboardView cardboardView = (CardboardView) findViewById (R.id.cardboard_view);    
// เชื่อมโยง CardboardView.StereoRenderer กับ cardboardView    
CardboardView.setRenderer(นี่);    
// เชื่อมโยง CardboardView กับกิจกรรมนี้    
setCardboardView(cardboardView);     
// เริ่มต้นวัตถุอื่นที่นี่
....
}

แสดงมุมมอง

เมื่อคุณได้รับ CardboardView แล้ว คุณจะเชื่อมโยงกับตัวแสดง จากนั้นจึงเชื่อมโยง CardboardView กับกิจกรรม Cardboard รองรับตัวแสดงภาพสองประเภท แต่วิธีที่เร็วที่สุดในการเริ่มต้นคือการใช้ CardboardView.StereoRenderer ซึ่งเป็นสิ่งที่แอปสาธิตใช้

CardboardView.StereoRenderer มีวิธีการหลักเหล่านี้:

• onNewFrame() ถูกเรียกทุกครั้งที่แอปแสดงผล
• onDrawEye() เรียกตาแต่ละข้างด้วยพารามิเตอร์ของตาที่แตกต่างกัน

การนำสิ่งเหล่านี้ไปใช้นั้นคล้ายกับสิ่งที่คุณทำกับแอปพลิเคชัน OpenGL ตามปกติ วิธีการเหล่านี้จะกล่าวถึงในรายละเอียดเพิ่มเติมในส่วนต่อไปนี้

ใช้งานบนNewFrame

ใช้เมธอด onNewFrame() เพื่อเข้ารหัสลอจิกการเรนเดอร์ก่อนเรนเดอร์แต่ละตา การดำเนินการต่อเฟรมใดๆ ที่ไม่เฉพาะเจาะจงสำหรับมุมมองเดียวควรเกิดขึ้นที่นี่ นี่เป็นสถานที่ที่ดีในการอัปเดตโมเดลของคุณ ในตัวอย่างนี้ ตัวแปร mHeadView มีตำแหน่งของส่วนหัว ต้องบันทึกค่านี้เพื่อใช้ในภายหลังเพื่อดูว่าผู้ใช้กำลังดูสมบัติอยู่หรือไม่:

 /**

* เตรียม OpenGL ES ก่อนที่เราจะวาดเฟรม

* @param headTransform การแปลงส่วนหัวในเฟรมใหม่

*/

@แทนที่

โมฆะสาธารณะบนNewFrame (HeadTransform headTransform) {

...

headTransform.getHeadView(mHeadView, 0);

...

}

ใช้งานบนDrawEye

ใช้ onDrawEye() เพื่อกำหนดค่าตาต่อตา

นี่คือส่วนย่อยของโค้ดการเรนเดอร์ และคล้ายกันมากกับการสร้างแอปพลิเคชัน OpenGL ES2 ปกติ ตัวอย่างต่อไปนี้แสดงวิธีรับเมทริกซ์การแปลงมุมมอง และเมทริกซ์การแปลงเปอร์สเปคทีฟ คุณต้องแน่ใจว่าคุณแสดงผลด้วยเวลาแฝงต่ำ วัตถุ Eye ประกอบด้วยเมทริกซ์การเปลี่ยนแปลงและการฉายภาพสำหรับดวงตา นี่คือลำดับเหตุการณ์:

• สมบัติเข้ามาในพื้นที่ดวงตา
• เราใช้เมทริกซ์การฉายภาพ นี่เป็นฉากที่เรนเดอร์สำหรับตาที่ระบุ
• Cardboard SDK ใช้ความผิดเพี้ยนโดยอัตโนมัติเพื่อเรนเดอร์ฉากสุดท้าย

 /**

* วาดกรอบสำหรับตา

*

* @param eye ตาที่จะเรนเดอร์ รวมการเปลี่ยนแปลงที่จำเป็นทั้งหมด

*/

@แทนที่

โมฆะสาธารณะ onDrawEye (ตาตา) {

GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

...

// ใช้การแปลงดวงตากับกล้อง

Matrix.multiplyMM(mView, 0, eye.getEyeView(), 0, mCamera, 0);

 

// กำหนดตำแหน่งของแสง

Matrix.multiplyMV(mLightPosInEyeSpace, 0, mView, 0, LIGHT_POS_IN_WORLD_SPACE, 0);

 

// สร้างเมทริกซ์ ModelView และ ModelViewProjection

// สำหรับคำนวณตำแหน่งลูกบาศก์และแสง

float[] เปอร์สเปคทีฟ = eye.getPerspective(Z_NEAR, Z_FAR);

Matrix.multiplyMM(mModelView, 0, mView, 0, mModelCube, 0);

Matrix.multiplyMM(mModelViewProjection, 0, มุมมอง, 0, mModelView, 0);

drawCube();

 

// วาดส่วนที่เหลือของฉาก

...

}

การจัดการอินพุต

กล่องกระดาษแข็งมีปุ่มกดที่ใช้แม่เหล็ก เมื่อคุณกดแม่เหล็ก สนามแม่เหล็กจะเปลี่ยนแปลงและถูกตรวจพบโดยเครื่องวัดความเข้มข้นของสนามแม่เหล็กของโทรศัพท์ของคุณ Cardboard SDK ตรวจพบเหตุการณ์แม่เหล็กเหล่านี้สำหรับคุณ

หากต้องการกำหนดพฤติกรรมที่กำหนดเองเมื่อผู้ใช้ดึงแม่เหล็ก ให้แทนที่CardboardActivity.onCardboardTrigger() ในกิจกรรมของแอป ในแอพล่าขุมทรัพย์ หากคุณพบสมบัติและดึงแม่เหล็ก คุณจะได้เก็บสมบัติไว้:

 /**

* เพิ่มคะแนน ซ่อนวัตถุ และให้ข้อเสนอแนะหากผู้ใช้ดึงแม่เหล็กในขณะที่

* มองไปที่วัตถุ มิฉะนั้น เตือนผู้ใช้ว่าต้องทำอย่างไร

*/

@แทนที่

โมฆะสาธารณะ onCardboardTrigger () {

ถ้า (isLookingAtObject()) {

mScore++;

mOverlayView.show3DToast("พบแล้ว! มองหาอันอื่น\nScore = " + mScore);

...

} อื่น {

mOverlayView.show3DToast("มองไปรอบๆ เพื่อค้นหาวัตถุ!");

}

// ให้ข้อเสนอแนะแก่ผู้ใช้เสมอ

mVibrator.สั่น(50);

}

เริ่มโครงการของคุณเอง

เมื่อคุณคุ้นเคยกับ Cardboard SDK สำหรับ Android มากขึ้นแล้ว ก็ถึงเวลาสร้างแอปพลิเคชันของคุณเอง

ไม่ว่าจะเป็นโครงการใหม่ที่คุณเริ่มต้นจากศูนย์หรือโครงการที่มีอยู่ นี่คือสิ่งที่คุณควรทำ

1) ดาวน์โหลดไฟล์ JAR สองไฟล์ คลิกที่นี่เพื่อดาวน์โหลด

2) คัดลอกและวางลงในโฟลเดอร์ app/libs ของคุณ (ค้นหาสิ่งนี้ในมุมมองโครงการของโครงสร้างโครงการ Android Studio)

3) คลิกขวาที่ไลบรารีและเลือก "เพิ่มเป็นไลบรารี"

จากนั้น ตรวจสอบให้แน่ใจว่าบรรทัดต่อไปนี้มีอยู่ในไฟล์ app/build.gradle ของโปรเจ็กต์ของคุณ:

การอ้างอิง { … คอมไพล์ fileTree(dir: 'libs', รวม: ['*.jar']) }

คุณพร้อมที่จะเริ่มต้นการพัฒนาแอป Virtual Reality แล้ว!

คุณเป็นนักพัฒนา Android หรือไม่? เข้าร่วม Truelancer วันนี้และเริ่มงานฟรีแลนซ์