Cardboard پلتفرمی برای اجرای برنامه های واقعیت مجازی توسط تلفن های هوشمند می باشد که توسط شرکت گوگل توسعه یافته است. به دلیل اینکه اپلیکیشن های بیشتری برای Cardboard توسعه داده شود گوگل Cardboard SDK را برای اندروید، IOS، موتور بازی سازی Unity و موتور بازی سازی Unreal منتشر کرد تا برنامه نویسان بتوانند اپلیکیشن های گوناگونی را برای پلتفرم Cardboard تولید کنند.

در گذشته به پشت صحنه واقعیت مجازی نگاهی داشته ایم. در این مقاله به توسعه یک اپلیکیشن واقعیت مجازی کوچک تحت سیستم عامل اندروید می پردازیم.

دانلود Cardboard SDK

برخلاف بسیاری از کتابخانه های اندروید، Cardboard SDK به صورت رسمی در Repository ها وجود ندارد تا بتوان از طریق Gradle به آسانی آن را بارگزاری کرد به همین دلیل برای دانلود Cardboard SDK باید از طریق Git آن را Clone کنید.

git clone https://github.com/googlevr/gvr-android-sdk.git

هنگامی که SDK را دانلود کردید یکی از پکیج های آن را باز کنید. برای این کار Import Project را انتخاب کرده و سپس همانند تصویر زیر مسیری که SDK را Clone کرده اید را انتخاب کنید.

در این مرحله شما به تمامی کامپوننت ها و پروژه های نمونه Cardboard SDK دسترسی دارید. همانند تصویر زیر توسط منوی drop down که در قسمت بالایی اندروید استودیو قرار دارد یکی از پروژه های نمونه را انتخاب کرده و سپس بر روی دکمه ی سبز رنگ Run کلیک کنید.

هنگامی که پروژه ی شما کامپایل و نصب شد باید یک صفحه ساده در رابطه با Machu Picchu مشاهده کنید.

اکنون زمان آن فرا رسیده است که یک اپلیکیشن Cardboard بسازیم.

ایجاد Panoramic Viewer

ابتدا یک پروژه ی جدید با minimum sdk برابر ۱۹ می سازیم. پس از اینکه پروژه ی خود را ایجاد کردید سپس باید کتابخانه های ضروری را از Cardboard SDK به مسیر پروژه ی خود اضافه کنید. برای مثال پوشه های common، commonwidget و panowidget را همانند تصویر زیر به محل پروژه ی خود اضافه کنید.

پس از اینکه پوشه های مورد نظر را به محل پروژه ی خود کپی کردید، فایل settings.gradle را باز کنید و تغییرات زیر را در فایل مربوطه اعمال کنید.

include ':app', ":common", "commonwidget", "panowidget"

سپس باید کتابخانه های فوق را به build.gradle اضافه کنید. همچنین شما به کتابخانه Protocol Buffers JavaNano نیاز دارید و به همین دلیل آن را در قسمت dependencies اضافه میکنیم.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.0.0'
 
    compile project(':common')
    compile project(':commonwidget')
    compile project(':panowidget')
 
    compile 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'
}

پس از انجام عملیات فوق، فایل AndroidManifest.xml را باز کنید. سپس باید مجوزهای مربوطه را به فایل Manifest خود اضافه کنید زیرا Cardboard SDK به مجوزهای INTERNET و READ_EXTERNAL_STORAGE نیازمند می باشد.

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

سپس درون تگ activity باید intent مورد نظر Cardboard را اضافه کنیم.

<activity android:name=".MainActivity">
    <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>

اکنون مراحل نصب تکمیل شده است و به سراغ کدنویسی می رویم. در این پروژه یک عکس را از مسیر app/src/main/assets انتخاب کرده و درون VrPanoramaView نمایش می دهیم. برای مثال در این پروژه از تصویری به نام openspace.jpg استفاده میکنیم.

در فایل لایه ی Activity، تگ vrPanoramaView را همانند قطعه کد زیر اضافه میکنیم.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <com.google.vr.sdk.widgets.pano.VrPanoramaView
        android:id="@+id/pano_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
</RelativeLayout>

سپس فایل MainActivity را باز میکنیم. درون این فایل ابتدا باید در متد onCreate شی vrPanoramaView را اضافه کنیم. سپس میتوانیم از طریق متد loadPhotoSphere عکس Bitmap خود را بارگزاری کنیم.

private VrPanoramaView mVrPanoramaView;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    mVrPanoramaView = (VrPanoramaView) findViewById(R.id.pano_view);
 
    loadPhotoSphere();
}

loadPhotoSphere متدی می باشد که عکس را از پوشه ی assets گرفته و درون vrPanoramaView بارگزاری میکند. این عملیات باید در بک گراند اپلیکیشن انجام شوند اما در این مثال برای یادگیری راحت تر این عملیات در UI Thread نوشته شده اند.

private void loadPhotoSphere() {
    //This could take a while. Should do on a background thread, but fine for current example
    VrPanoramaView.Options options = new VrPanoramaView.Options();
    InputStream inputStream = null;
 
    AssetManager assetManager = getAssets();
 
    try {
        inputStream = assetManager.open("openspace.jpg");
        options.inputType = VrPanoramaView.Options.TYPE_MONO;
        mVrPanoramaView.loadImageFromBitmap(BitmapFactory.decodeStream(inputStream), options);
        inputStream.close();
    } catch (IOException e) {
        Log.e("Tuts+", "Exception in loadPhotoSphere: " + e.getMessage() );
    }
}

درنهایت باید متدهای onPause و onResume و onDestroy را تکمیل کنیم.

@Override
protected void onPause() {
    mVrPanoramaView.pauseRendering();
    super.onPause();
}
 
@Override
protected void onResume() {
    super.onResume();
    mVrPanoramaView.resumeRendering();
}
 
@Override
protected void onDestroy() {
    mVrPanoramaView.shutdown();
    super.onDestroy();
}

اکنون اپلیکیشن را اجرا میکنیم و انتظار داریم همانند تصویر زیر، تصویری گسترده را به ما نمایش دهد و هنگامی که شما تلفن هوشمندتان را جابجا میکنید باید تصویری که مشاهده میکنید جابجا شود.

اگر بر روی آیکن cardboard که در گوشته سمت راست قرار دارد تپ کنید، تصویر را به دو قسمت تقسیم میکند و این همان تصویری است که از طریق Cardboard یا Daydream تماشا میکنید.

نتیجه گیری

در این مقاله آموختیم که چگونه اولین اپلیکیشن خود را برای Cardboard بسازیم. با مجموعه صفر تا قهرمان همراه باشید تا قهرمان دنیای واقعیت مجازی شوید.