ساخت بازی در اندروید قسمت چهارم

هومن حیدری 1395/1/12 3142

سلام خدمت همه عزیزان

در خدمتتونم با قسمت چهارم از سری آموزش های بازی سازی در اندروید.

خب تا اینجا یک سری مقدمات از جاوا براتون گفتم، بدون اینکه حرفی از اندروید و بازی سازی وسط بیاد. واسه تنوع بد نیست موازی با آموزش های جاوامون یک بازی ساده بسازیم و هر چقدر بیشتر از جاوا و اندروید گفتیم سطح بازی ها رو بالاتر ببریم. به نظرم رسید جالب تر میشه اگه جاوارو با بازی سازی در اندروید یاد بگیرید. البته قرار نیست فعلا تئوری بازی سازی بگم براتون؛ همون مباحثی رو از جاوا که قرار بود خیلی محض قبل از شروع اندروید کار کنیم، داریم انتقالشون میدیم به محیط برنامه نویسی اندروید! برای این جلسه و جلسه آینده شمارو با تمامیtopicهای مورد نیازی که برای شروع برنامه نویسی اندروید لازم دارید آشنا میکنم. البته فقط تئوریکال نخواهد بود! ما یک رابط کاربری ساده برای منوی اولین بازیمون خواهیم ساخت و کمی هم با کدهای جاوا در اندروید رو به رو میشیم. در ادامه خواهید دید که چطور میتونید برنامه تون رو روی شبیه ساز اندروید یا یک دستگاه اندرویدی واقعی اجرا کنید. نکته مهمی که باید همینجا بهش اشاره کنم، اینه که به تمامی اینtopicها تقریبا سطحی پرداخته میشه؛ عمق ماجرا خیلی بیشتر از این حرفاس و هرچقدر که بیشتر پیش بریم درکتون از اندروید و این مفاهیم عمیق تر میشه. فعلا برای یادگیری جاوا نیازی نیست بیشتر از اینایی که دارم میگم بدونید! بعد از این که این مقدمات رو گفتم، مفاهیم جاوارو ادامه میدیم و هم زمان از اون مفاهیم در جهت تکمیل بازی هامون استفاده میکنیم.

چون از این جلسه کار با اندروید رو شروع میکنیم، نحوه نصب پکیج هایSDKموجود در سایت رو توضیح میدم. قبلا هم گفتم که این پکیج ها رو با توجه به نسخه اندروید استودیویی که داخل سایت گذاشتم، براتون قرار دادم! برای اینکه بدونید هر فایلی رو کجا اکسترکت کنید مراحل پایین رو دنبال کنید:

- به مسیر نصبSDKتون برید. فایلzipی که با عنوانintelاز سایت دانلود کردید رو داخل پوشهextrasقرار بدید و اکسترکتش کنید (Extract here).وارد پوشهintelو بعد پوشهHAXMبشید، فایل ستاپintelhaxm-androidرو اجرا کنید برای نصب نسخه جدیدhaxm.مراحل نصب هم خیلی ساده س و فکر نمیکنم نیازی به توضیح داشته باشه.

- اگه احیاناhaxmبراتون نصب نشد (به دلایلی که جلسه اول گفتم!) باید فایلarmeabi-v7aرو از سایت دانلود کنید و داخل پوشهsystem-imagesدر مسیر نصبSDK، اکسترکتش کنید.

- داخل پوشهextrasاگه پوشه ای به نام "google"دارید، فایل هایgoogle_play_servicesوusb_driverرو داخلش قرار بدید و اکسترکت کنید. اگه هم پوشهgoogleرو ندارید، خودتون دقیقا با همین نام ایجادش کنید و اون دوتا فایلzipرو داخلش اکسترکت کنید.

- داخل پوشهextrasاگه پوشه ای به نام "android"دارید، فایلsupportرو داخل اون پوشه قرار بدید و اکسترکت کنید. اگه هم این پوشه رو ندارید، خودتون دقیقا با نامandroidایجادش کنید و بعد فایلsupportرو داخلش اکسترکت کنید.

- در مسیر نصبSDKپوشهsamplesرو ایجاد کنید و فایل زیپandroid-23-samplesرو که از سایت دانلود کردید داخل این پوشه اکسترکت کنید.

- و در نهایت، در مسیر نصبSDKوارد پوشهplatformsبشید و پوشهandroid-23رو دیلیت کنید! فایلی که با عنوانandroid-23-platformاز سایت دانلود کردید داخل پوشهplatformsاکسترکت کنید.

قدم اول اینه که برای اولین بازیمون یک پروژه اندروید ایجاد کنیم. هر پروژه اندروید حاوی فایل هایی هستش که یک برنامه اندروید رو میسازه! برای ساخت یک پروژه جدید، اندروید استودیو رو اجرا کنید و روی گزینهStart a new Android Studio projectکلیک کنید:

بازی سازی در اندروید

اگه این دایالوگ رو نمیبینید و مستقیما اندروید استودیو براتون باز میشه احتمالا به خاطر اینه که قبلا با اندروید استودیو پروژه ایجاد کردید؛ که در این صورت از menu bar ، زیر منوی file و آپشن New ، روی New project کلیک کنید

بازی سازی در اندروید

پنجرهconfigurationبرای پروژه ای که ایجاد کردید ظاهر میشه؛

- بازی اولمون به نوعی بازی ریاضیه؛ بد نیست اسمش رو بذاریمMath Game.

- برای فیلدcompany domainنام دامنه خودتون یا شرکتتون رو وارد کنید یا اگه هم نام دامنه ای ندارید بذاریدشexample.org.

- همونطور که در حال وارد کردن نام دامنه هستید، اگه دقت کنید میبینید که پایینش، اندروید استودیو در حال آپدیت کردنه نام پکیج برنامه س.

- نام پکیج در اندروید به طور دیفالت از قراردادreverse DNSاستفاده میکنه؛ به این شکل که اگه شرکت یا شخص سازنده محصولِproduct، نام دامنه ثبت شدهexample.orgرو داشته باشه، رشتهreverse-DNSش "org.example.product"خواهد بود.

- کانوِنشنreverse DNSبه این منظور استفاده شده تا جلوی تصادفات احتمالی ناشی از هم نام بودن پکیج هارو بگیره. از اونجا که نام دامنه ها منحصر به فرد هستند و هیچ دو نام دامنه یکسانی وجود نداره، پس نباید هیچ دو برنامه اندرویدی نام پکیج یکسانی داشته باشن.

- تمامی برنامه های اندروید با استفاده از نام پکیجشون روی سیستم عامل اندروید و گوگل پلی استور شناخته میشن. بعد از اینکه برنامه تون رو منتشر کردید، نمیتونید نام پکیج برنامه رو تغییر بدید! نام پکیج هویت برنامه شما رو تعریف میکنه، و اگه تغییرش بدید برنامه تون به عنوان یک برنامه دیگه شناخته میشه، و کاربرهای نسخه قبلی نمیتونن برنامه رو به نسخه جدید آپدیت کنن.

- در نهایت یک لوکیشن برای قرارگیری فایل های پروژه تون تعیین کنید و رویNextکلیک کنید:

برای پنجره بعدی تنها چک-باکسPhone and Tabletرو تیک خورده بذارید و تیک باقی چک-باکس ها رو بردارید. تو این صفحه میتونید مشخص کنید که میخواید برنامه تون چه دستگاه هایی رو ساپورت کنه! فعلا برای نسخهMinimum SDKتونAPI 16یا اندروید 4.1 رو انتخاب کنید، بعدا بیشتر در مورد تفاوت نسخه های اندروید خواهید آموخت. رویNextکلیک کنید:

از این پنجره میتونید یک صفحه (یا اکتیویتی) آماده، مناسب با نیازتون، به برنامه اضافه کنید. این صفحات یک سری الگو یاtemplateهستن. وقتی شماwordیاpowerpointهم باز میکنید از این قبیلtemplateها بهتون پیشنهاد میشه! اگه یک برنامه نویس حرفه ای باشید نیازی به این ها ندارید، و میتونید خودتون استارت همه چی رو از صفر بزنید، اما خب فعلا دانش ما در این حد نیست! برای منوی بازیمون نیاز به یک صفحه داریم که قالبBlank Activityبراش مناسبه. انتخابش کنید و رویNextکلیک کنید:

اینجا هم نیاز به هیچ تغییری نیست. رویFinishکلیک کنید:

به طور دیفالت زمانی که اندروید استودیو باز میشه دایالوگtip of the dayبراتون بالا میاد. بعضی از نکاتی که بهش اشاره میکنه ممکنه الان براتون قابل درک نباشه چون هنوز دارید جاوا یاد میگیرید، اما خیلیاشون واقعا مفیدن و من خودم به شخصهshortcutهای خیلی خوبی ازش یاد گرفتم! بهتون پیشنهاد میکنم هر بار چند ثانیه از وقتتون رو اختصاص بدید و نگاهی به این نکته ها بندازید. در ضمن همونطور که جلسه اول هم گفتم اندروید استودیو ازIntelliJ IDEAساخته شده و شما میتونید لیست کاملی ازshortcutهاش رو از این لینک مشاهده کنید:

https://www.jetbrains.com/idea/help/keyboard-shortcuts-you-cannot-miss.html

رویcloseکلیک کنید تاtip of the dayبراتون بسته شه.

اگه کاملا با برنامه نویسی ناآشنا باشید، احتمالا کد، آپشن ها، و فایل ها ممکنه الان کمی دلهره آور باشن اما زیاد نگرانش نباشید، چون فعلا قرار نیست برای اینکه جاوا یاد بگیرید خودتون رو درگیر خیلیاشون کنید! هر زمان که نیاز به توضیحات مفصل تر بود، یک قدم جلوتر میبرمتون. در حال حاضر یک برنامه اندرویدی داریم که قابلیت اجرا داره! میتونیم برنامه مون روbuildکنیم و روی یک دستگاه اندرویدی اجراش کنیم، که به زودی این کار رو هم خواهیم کرد. فعلا بیاید یه کم بیشتر با محیط اندروید استودیو آشنا شیم.

اندروید استودیو ابزار خیلی گسترده ایه، اما برای شروع تنها لازمه که بخش بخش بریم جلو و با قسمت های مختلفش آشنا شیم. چیزی که در حال حاضر میتونه مفید باشه نامگذاری قسمت های مختلف رابط کاربریشه تا من برای آموزش بتونم راحت تر بهشون اشاره کنم:

1.Project Explorer

2.The Editor

3.Menu bar

4.Toolbar

5.Navigation bar

6.Important tool windows

هر قسمت رو به طور مجزا توضیح میدم:

1. از این قسمت میتونید تمامی فایل ها و فلدرهایی رو که اندروید استودیو برای پروژه تون ایجاد کرده مشاهده کنید. اکسپلورر تو تصویر بالا رویAndroid viewقرار داره؛Android viewدقیقا همون شکلی نیست که اکسپلوررِ ویندوز فایل ها و فلدرهای پروژه رو نمایش میده! بلکه کمی ساده تر و برجسته تر شدن تا مدیریت و جستجوی فایل های پروژه برامون آسون تر شه. پیشنهاد من اینه که همیشه اکسپلورر رو رویProject viewقرار بدید، چون اینmodeدسترسی بهتری به عناصر موجود درون پروژه براتون فراهم میکنه (تصویر پایین). اگه اکسپلورر براتون باز نیست، یا اگه بازه و تحت شرایطی خواستید بسته باشه، از کلیدهای ترکیبیalt + 1در ویندوز استفاده کنید.

2. اولاً بگم که وقتی اندروید استودیو باز میشه دوتاtabاون بالا براتون بازه، و به طور دیفالت فایلcontent_main.xmlبراتون نمایش داده میشه. اگه تعجب کردید که چرا اسکرین شات من با محیط شما تفاوت داره به خاطر همینه! کافیه فایلMainActivity.javaرو برای نمایش انتخاب کنید. این ناحیه (یعنی ناحیه 2) ادیتورIDEمحسوب میشه. پنجره ادیتور بسته به نوع فایلی که داریم ویرایش میکنیم تغییر میکنه. همونطور که خودتون دیدید برای فایلcontent_main.xmlکه رابط کاربری تنها صفحه برنامه رو تعریف میکنه، یک نمایش از ادیتور رو داشتیم که متشکل از تصویر یک گوشیNexus 4و تعدادی بند و بساط دیگه بوده، که ما میتونیم از این ابزار برای طراحی ویژوال رابط کاربریمون استفاده کنیم، اما برای فایلMainActivity.javaکه حاوی کدهای جاوای برنامه ست، نمایش بالا از ادیتور رو داریم!

3. مشابه نقشmenu barدر اکثر برنامه ها؛ دسترسی به تمامی قابلیت های اندروید استودیو رو برامون فراهم میکنه.

4. تولبار یا نوار ابزار، کلی آپشن تک-کلیکی مفید داره که میتونیم برای انجام کارهایی مثلdeployingوdebuggingبازی هامون استفاده کنیم. اگه کرسر موس رو روی هرکدوم از آیکون های تولبار ببرید یک پاپ-آپ براتون نمایش داده میشه و جزئیات بهتری در اختیارتون قرار میده.

5. نویگیشن بار شبیه یکfile pathیا مسیر فایل عمل میکنه، و دقیقا نشون میده فایلی که در حال حاضر در ادیتور بازه، کجای پروژه واقع شده.

6. اینا هم چندتاtabهستند که اگه یه بار روشون کلیک کنید ظاهر میشن و با یک کلیک دیگه برمیگردن سر جای اولشون! جلوتر درباره شون توضیح میدم.

منظور ازandroid viewوproject viewکه بالا بهشون اشاره کردم.

خب بیاید یه کم بیشتر درباره قسمت های مختلف رابط کاربری اندروید استودیو و اینکه چطور پنجره ادیتور میتونه مثل ربات های سری فیلم های ترنسفرمرز خودش رو تبدیل به طراحِUIوبژوال کنه، صحبت کنیم! بعد از اینکه به اندازه کافی باvisual designerاندروید استودیو آشنا شدید میتونیم یک صفحه ی منوی ساده برای بازیمون بسازیم.

قبلش در موردUIباید بدونید؛ رابط کاربری یاUI، کانکشن بین برنامه شما و کاربرهای برنامه شماست. در واقع برای کاربر،UI، خود برنامه محسوب میشه، چون تنها با این قسمت از برنامه تون تعامل داره!UIها در اندروید میتونن به طور کامل با کدهای جاوا ساخته شن، یا، همونطور که ما خواهیم دید، با استفاده از طراح ویژوال (visual designer)بدون حتی یک خط از جاوا! طراح ویژوال اندروید استودیو به طور اتوماتیک کدUIرو برای برنامه مون تولید میکنه. البته همونطور که بعد از ساخت رابط کاربری منوی بازیمون بررسی میکنیم، برای اینکه بتونیمUIرو وادار کنیم تا کار مفیدی انجام بده، نیاز داریم تا باهاش تعامل داشته باشیم، و این تعامل همواره توسط کدهای جاوا صورت میگیره! ما خیلی زیاد وارد بحث توسعه رابط کاربری اندروید نمیشیم، چون یک مبحث مفصل و مجزاس و ربطی هم به کار ما نداره، بلکه جزئی اصلی از اپلیکیشن های غیر بازی محسوب میشه و باید رجوع کنید به دوره اندروید خانم مقاری. به جاش ما زمان بیشتری رو صرف رسم پیکسل ها و تصاویر برای ساخت بازی هامون خواهیم کرد. با این حال، یکUIعادی و قابل قبول کاربردهای خودش رو داره، و طراح ویژوال اندروید استودیو سریع ترین و آسون ترین راه برای شروعه!

خب رو تبcontent_main.xmlکلیک کنید .

اگه سهواًtabش رو بستید، ازProject Explorer، مسیر پایین رو دنبال کنید،

Math Game - app - src - main - res - layout

و روش دابل کلیک کنید تا در پنجره ادیتور براتون باز شه:

بعد از یهloadingکوتاه یک چیزی خیلی شبیه به این تصویر رو خواهد دید

موقعی که فایلMainActivity.javaتو پنجره ادیتور باز بود، تمامی این ناحیه که در تصویر بالا میبینید، اختصاص داده شده بود برای نمایش کدهای جاوای پروژه! در واقع یک پنجره کاملا متنی الان تبدیل شده به یک پنجره با قسمت های مختلف! هر قسمتش رو جداگانه بررسی میکنیم.

ناحیه 1، پَلِت (یاPalette)نامیده میشه. شما میتونید عناصرUIاندروید رو از بین عناصر موجود در این قسمت انتخاب کنید و خیلی ساده روشون کلیک کرده وdragشون کنید روی طرح رابط کاربریتون. ناحیه 2، نمایش ویژوال رابط کاربری ای هستش که شما در حال ساختش هستید؛ همون جایی که شما عناصرdragشده از پلت رو رها میکنید! سمت راست ادیتور (بالا)، ناحیهComponent Treeرو میبینید.component treeبهتون اجازه میده تا راحت تر ساختار یکUIپیچیده رو بررسی و کنترل کنید، یا هر عنصر خاصی ازUIرو که در نظر دارید راحت ترselectکنید. پایینcomponent treeپنلpropertiesقرار داره. اینجا شما میتونید خصوصیات هر عنصری ازUIرو کهselectکردید تنظیم کنید! برای مثال چیزهای ساده ای مثل رنگ، سایز و ... یا پراپرتی های پیشرفته تر.

ناحیه 5 رو من در حاشیه توضیح میدم. ببینید، دو تا تبdesignوtextکه در این ناحیه قرار دارن بهتون اجازه میدن تا بین دو نمایش اصلی که اندروید استودیو برای این نوع از فایل هایlayout (همون فایل های رابط کاربری) فراهم میکنه، سوییچ کنید! نمایشdesign، نمایش دیفالت هستش و درباره ش همین الان توضیح دادم. نمایشtext، همینUIدر حال ساختتون رو نشون میده، اما کدی رو نمایش میده که به جایpaletteوcomponent tree، به طور خودکار برای ما تولید شده! در حال حاضر نیازی نیست که شما از این کد سر درآرید یا نگرانش باشید، چون این کد به طور کامل توسط اندروید استودیو برای ما اداره میشه! البته بد نیست که گهگاهی بین این دوتاtabسوییچ کنید تا کم کم درک کنید که برای مثال وقتی ما یک عنصری رو از پلت به رابط کاربریمون اضافه میکنیم، طراح ویژوال اندروید استودیو چه کدی رو برامون ایجاد میکنه! هر تغییری که در یک نمایش (designیاtext)اعمال کنید،visual designerبه طور خودکار در اون یکی نمایش براتون اعمال میکنه! اما خب طبیعیه که فعلا برای یادگیری جاوا هیچ نیازی بهش نداریم. این کدeXtensible Markup Languageیا به طور خلاصهXMLنامیده میشه.

قبل از اینکه ادامه بدیم، مساله ای باید حل شه! به خاطر یک سری از تغییراتی که گوگل از اندروید استودیوی 1.4 به بعد در نحوه مقداردهی اولیه پروژه برایAPI 23اعمال کرده، عنصری به نامFloating Action Buttonبه طور دیفالت درUIبرنامه تون قرار میگیره:

ما نیازی بهش نداریم و قرار هم نیست استفاده ای ازش بشه. بهتون نشون میدم چطور کدهای مربوط بهش رو کامنت کنید تا نقشی تو برنامه تون نداشته باشه. پس لطفا مِن بعد هر بار که یک پروژه جدید ایجاد کردیم این مراحلو برای اون پروژه هم اجرا کنید.

فایلMainActivity.javaاگه باز هست روtabش کلیک کنید، یا اگه نیست ازProject Explorerمسیر پایین رو دنبال کنید:

MathGame - app - src - main - java - org.example.mathgame

و روش دابل کلیک کنید؛

کدی که ازFloatingActionButtonشروع میشه رو تا انتهای جایی که یک آکولاد بسته ، یک پرانتز بسته و یک : داریمmarkکنید

و کلید هایcrtl + /رو فشار بدید (/همون کلید علامت سواله که بالایcrtlسمت راست کیبورد قرار داره ! ) تا این قسمت از کد کامنت شه .

فایلactivity_main.xmlرو از همون مسیری که برایcontent_main.xmlطی کردید پیدا کنید و روش دابل کلیک کنید، و به جای نمایشdesign، نمایشtextش رو انتخاب کنید،

این قسمت از کد روmarkکنید و به همون شکلی که بالا گفتم کامنتش کنید.

بسیار خب. تا اینجا یک مرور کلی ازvisual designerاندروید استودیو، و یک نگاه اجمالی خیلی خفیف تر (!) به کدی که به طور خودکار برامون تولید میکنه، داشتیم! برای قدم بعدی، نگاهی سریع به بعضی از عناصر مفیدUIدر اندروید (که میخوایم در پروژه مون استفاده کنیم) و نحوه اضافه کردنشون بهUI، میندازیم و چندتا از پراپرتی های کلیدی هر کدومشون رو بررسی کنیم. در نهایت این قابلیت رو پیدا خواهید کرد تا از آموخته هاتون برای ساخت منوی بازی استفاده کنید.

لطف کنید و یک بار دیگه فایلcontent_main.xmlرو در ادیتور باز کنید، یا اگه بازه روtabش کلیک کنید. واسه اینکه نکته مبهمی باقی نمونه به طور کامل همه چی رو با تصویر توضیح میدم! در حال حاضر باید یک همچین وضعیتی بر محیط ادیتورتون حاکم باشه:

از قسمتcomponent tree، رو فلش کنار ...shown inکلیک کنید تا عناصری که در حال حاضر درUIبرنامه وجود دارن براتون نمایش داده شه:

همونطور که قابل مشاهده س، یکRelativeLayout (که جلوتر میگم وظیفه ش چیه) و یکText ViewدرUIقرار دارن. اگه رو متن !Hello, Worldکه روی صفحه نمایش گوشی در حال نمایشه کلیک کنید، 2تا اتفاق جالب می افته:

- پنجرهcomponent treeخود به خودTextViewروselectکرد.

- پنلpropertiesتا قبل از این خالی بود، اما الان پراپرتی های متفاوتی برامون نمایش داده میشه که اختصاص دارن بهTextView.

- نتیجه: هر عنصری ازUIچه از روی صفحه نمایش گوشی و چه از پنجرهcomponent treeسلکت شه، پنلpropertiesپراپرتی های مربوط به اون عنصر رو نمایش میده.

خبTextViewچیه؟TextViewیک ویجت هستش که میتونه متنی رو به کاربر نمایش بده. اگه بهpaletteنگاهی بندازید میبینید که در قسمتwidgets، انواع مختلفی ازTextViewها (در واقع 4 نوع!) از قبیلPlain TextViewیاLarge Textو ... برای نمایش سایزهای مختلفی از متن موجوده! (متن !Hello, Worldبا استفاده از ویجتSmall Textنمایش داده شده!) میتونیم ازTextViewبرای نمایش عنوان بازیمون در صفحه منو استفاده کنیم.

ویجتLarge Textرو ازpaletteانتخاب کنبد وdragش کنید روی صفحه نمایش گوشی. هیچ فرقی نمیکنه کجایUIقرارش بدید، اما بلافاصله کلیک تون رو رها نکنید! پیشنهاد میکنم ویجت رو دور تا دور صفحه نمایش گوشیdragکنید تا ببینید اندروید استودیو چطور به طور گرافیکی برای موقعیت های مختلف، آپشن در اختیارتون قرار میده! برای مثال تو تصویر پایین میتونید ببینید وقتی که ویجت در حالdragشدن در مرکز صفحه نمایشه،designerبه چه شکلی در میاد:

بعد از اینکه جایگاه مورد نظرتون رو یافتید و کلیک چپ موس رو رها کردید، ویجت بهUIاضافه میشه:

لطفا به قسمتcomponent treeدقت کنید، یک عنصر دیگه به عناصرUIاضافه شد! به طور دیفالت برای اینTextViewمتنLarge Textنمایش داده میشه که خب میتونیم تغییرش بدیم. همچنین مشخصه که به طور دیفالت ویجتLarge Textمتن بزرگ تری رو نسبت به ویجتSmall Text (متنHello World)برامون فراهم کرده. البته میشه خیلی راحت این سایزها رو هم تغییر داد!

برای تغییر سایز متن باید بریم سراغ پنلproperties.اول مطمئن شید کهTextViewتونselectشده؛ از این پنل پراپرتیtextSizeرو پیدا کنید، (پراپرتی ها به ترتیب حروف الفبای انگلیسی در این پنل قرار گرفتن، باید اسکرول کنید!) روی فیلد خالی سمت راستش کلیک کنید، مقدار "100sp"رو تایپ کنید و کلیدenterرو فشار بدید:

با متنی بسی بزرگ تر مواجه میشید! پس میتونیم سایز متنTextViewمون رو با افزایش یا کاهش مقدار وارد شده در این فیلد اصلاح کنیم. واحدspمخففscaled pixelsهستش؛ یک سیستم اندازه گیری که سعی میکنه متن رو تقریبا برابر با اندازه اصلیش در تراکم های مختلف از صفحه نمایش مقیاس کنه!

اگه دوست داشتید با چندتا از پراپرتی های دیگه هم کار کنید، برای مثال مقدار پراپرتیtextرو میتونید ازLarge Textبه یک مقدار دیگه تغییر بدید تاTextViewمتن دیگه ای رو نمایش بده. البته چون پراپرتیtextیک پراپرتی خیلی پرکاربرد هستش علاوه بر پنلproperties، با دابل کلیک کردن رویTextViewفیلدی برای ویرایش این پراپرتی و پراپرتیidکه جلوتر درباره ش توضیح میدم، براتون فراهم میشه:

در نهایتTextViewرو سلکت کنید و کلیدdeleteروی کیبوردتون رو فشار بدید تا ازUIدیلیت شه.TextViewاول که خود پروژه با متنHello WorldبهUIبرنامه اضافه کرده بود رو هم به همین شکل دیلیت کنید:

یک صفحه خالی داریم، اما پنلpropertiesخالی نیست! چون تنها عنصرUI، یعنی عنصرRelativeLayoutسلکت شده، و به نظر میرسه عنصری نامرئی باشه!RelativeLayoutیکی از چندین نوع عنصرlayoutمحسوب میشه (اگه به قسمت بالای پنجرهpaletteنگاه کنید، آپشن های اصلی عنصرlayoutرو میتونید ببینید!). هر عنصرlayoutی به عنوان یکbaseبرای کنترل و چینش ویجت های دیگه ی رابط کاربری، مثلTextViewها،Buttonها و ... فراهم شده. اگه بخوام یک مثال ملموس بزنم،layoutرو مثل سفره ای فرض کنید که ما برای چیدن ویجت های دیگه پهنش میکنیم، و البته این سفره برای ویجت های خودش تصمیم گیری میکنه که به چه شکلی اجازه چیده شدن دارند، افقی، عمودی، وابسته به هم (relative)و یا حالت های مختلف دیگه. ما از همین نوع عنصرlayout، یعنی عنصرRelativeLayout، برای رابط کاربری منوی بازیمون استفاده خواهیم کرد.

در رابطه با کلمهlayout، لطفا دقت کنید که برنامه نویسای اندروید این کلمه رو 2 جا به کار میبرن، با 2 تعریف متفاوت، و این ممکنه کمی گیجتون کنه!

- تعریف اول: همونlayoutخودمون (!) که بالا درباره ش توضیح دادم؛ یک عنصر در رابط کاربری که نحوه چینش عنصرهای فرزند خودش رو تعیین میکنه.

- تعریف دوم: یک نوعresource (فایل های افزوده شده به پروژه که کد میتونه ازشون استفاده کنه!) که رابط کاربری صفحه ای از برنامه رو تعریف میکنه و به عنوان یک فایل با فرمتxmlذخیره میشه. مثل فایل هایcontent_main.xmlوactivity_main.xml، که اگه به دایرکتوریشون در اکسپلورر هم دقت کنید میبینید که در زیرشاخهlayout، از شاخهresیا منابع قرار دارند:

ویجتImageViewویجت مورد بحث بعدیست؛ خیلی نباید سورپرایز شید اگه بگم برای نمایش تصاویر ازش استفاده میشه! یک راهکار خیلی ساده ست و البته سریع، برای اضافه کردنartworkهامون به بازی. از پنجره پلت، عنصرImageViewرو که در قسمتWidgetsقرار گرفته، رو طرح رابط کاربریتونdragو بعد هم رهاش کنید. دقیقا مشابه باTextViewمیتونید در مرکز طرحتون قرارش بدید یا هر جای دلخواهی که مد نظرتون بود:

چون هنوز مشخص نکردیم کهImageViewچه تصویری رو نمایش بده، به نظر میرسه که عنصر جدیدی بهUIاضافه نشده! اما از قسمتcomponent treeمیتونید مشاهده کنید که یکImageViewدرUIوجود داره. اگهImageViewسلکت نیست از پنجرهcomponent treeسلکتش کنید، از پنلpropertiesپراپرتیsrcرو پیدا کنید، و روی فیلد خالی کنارش کلیک کنید. همونطور که میبینید آپشنی براتون فراهم شده که اگه روش کلیک کنید آپشن های بیشتری در اختیارتون قرار میده:

این ها تمامی تصاویری هستند که میتونیم در اینImageViewنمایش بدیم! جاست فُر فان، از تبSystem، آیکونsym_def_app_iconرو از شاخهDrawableانتخاب وokکنید:

البته بعدا خواهید دید که ما میتونیم هر تصویری که دلمون میخواد به این لیست اضافه کنیم! و این یک راه ساده و قدرتمند برای ساخت یک منوی بازی جذابه. برای عنصرImageViewمقدار پراپرتیlayout:widthرو (که ابتدای پنلpropertiesقرار داره) به 150dp، و مقدار پراپرتیlayout:heightرو هم به 150dpتغییر بدید (به طور دیفالت هر دوwrap_contentهستند!). واحدdpیک راه اندازه دادن به عناصر و ویجت هایUIهستش که باعث میشه در دستگاه های مختلف با تعداد پیکسل های متفاوت این اندازه نسبتا ثابت بمونه:

بسیار عالی. در نهایت اینImageViewرو هم دیلیت کنید! آخرینViewای که درباره ش صحبت میکنیمButtonViewهستش. نامش گویاست! دکمه ای که شما برای کاربر فراهم میکنید تا کاربر گرامی فشارش بده و خب به تبعش یک اتفاقی هم در برنامه بی افته! چند نوع ازButtonViewدر پنجره پلت (قسمتWidgets)موجوده، مثلButtonوSmall Button، و اگه پایین تر هم بریدImage Button.ما از یکButtonViewی معمولی که با عنوانButtonلیبل شده استفاده میکنیم. شما میتونید متن رویButonرو هم مثلTextViewبا استفاده از پراپرتیtextدر پنلpropertiesیا دابل کلیک کردن روی خودButtonتغییر بدید.

خب کارمون واسه این جلسه تمومه! با چیزهایی که یاد گرفتید سعی کنیدUIی پایین رو خودتون بسازید. فعلا فقط برامون مهمه که منوی بازیمون کاربردی باشه و بتونیم ازش استفاده کنیم! برای بازی های بعدی یاد میگیرید که چیزهای بیشتری به منوتون اضافه کنید (مثل انیمیشن های مختلف) تا ظاهر جذاب تری پیدا کنه. جلسه آینده ابتدا ساخت همین منو رو خیلی کوتاه توضیح میدم و دیگه کاری با طراحیUIنداریم و با زبان کد صحبت خواهیم کرد!

دانلود دانلود PDF قسمت چهارم آموزش بازی سازی در اندروید

قسمت بعدی قسمت پنجم آموزش بازی سازی در اندروید در حال بارگزاریست

قسمت قبلی