آموزش 17: ساخت اپلیکیشن نقاشی با اپ ایونتر(قسمت 2)

بخش دوم برنامه نویسی

پس از آن که وارد ویرایشگر شدید.

1- بر روی دکمه سرخ که خودتان نام گزاری کردید، کلیک کنید تا کشوی آن باز شود. از آن وقتی سرخ کلیک شود (when ButtonRed.Click) را انتخاب کنید.

2- بر  روی بوم کلیک کنید. در کشوی باز شده پایین بروید  و بلوک قرار دادن رنگ بر بوم (set DrawingCanvas.PaintColor) را انتخاب کنید.

3- از منوی ساخته شده،کشوی رنگ(Colors) را باز کنید و در میان رنگها بگرید و رنگ سرخ را پیدا کنید. حالا آن را انتخاب کنید و در دهانه قرار دادن رنگ بر بوم بگذارید.

4- برای باقی رنگ‌ها نیز همین کار را انجام دهید.

5- برای دکمه پاک کن: پس از آن که وقتی پاک کن  کلیک شود (when wipe.Click) را انتخاب کردید.بوم را انتخاب کنید و "پاک کردن بوم(call DrawingCanvas.Clear)" را  دهانه آن بگذارید.

اگر برنامه را امتحان کنید می‌بینید که هیچ اتفاقی در صفحه نمی‌افتد. 

می‌خواهیم کاری کنیم که اگر انگشت صفحه را لمس کرد، یک نقطه گذاشته شود  و اگر روی صفحه کشیده شد، خط کشیده شود. به این حالت رویداد لمس می‌گویند.

6-  روی بوم کلیک کنید و از انتخاب‌هایتان وقتی بوم لمس شد(when DrawingCanvas.Touched)  را انتخاب کنید. می بینید که سه نقطه در آن روشن است. x, y, و touchedSprite.  

می‌توانیم دو حالت (get) و (set) را انتخاب کنیم.

7- برای این که بتوانیم در جای دلخواه نقطه بگذاریم.  از کشوی بوم، "صدا زدن بوم برای کشیدن دایره  (call DrawingCanvas.DrawCircle)" را انتخاب می‌کنیم و داخل دهانه "وقتی بوم لمس شد "می‌گذاریم. می‌بینید که این بلوک جدید چهار دهانه دارد، که یکی از قبل پرشده است.  از سه دهانه دو تا مربوط به محور مختصات نقطه است. روی (x) و (y) که می‌رویم (get x) و (get y) را انتخاب می‌کنیم و در جای خودشان می‌گذاریم. دهانه بعدی اندازه نقطه را مشخص می‌کند.  از قسمت ریاضی (math) صفر را انتخاب می‌کنیم و داخل (radius) می‌گذاریم و اندازه آن را  به 5 یا 4  دگرگونه می‌کنیم.

توجه کنید که تغییر ضخامت خط را بعدتر می‌آموزیم. در حال حاضر فقط یک اندازه را یاد می‌گیریم.

اگر اپلیکیشن خود را انتخاب کنید می‌بینید که وقتی صفحه را لمس می‌کنیم.  روی صفحه نقطه گذاشته می‌شود. 

این نکته‌ای است که تازه آموختیم.

 

8- حالا در ادامه مثل آموزش قبل رویداد کشیدن خط را انتخاب می‌کنیم و همان موارد را انجام می‌دهیم. اگر یادتان رفته لینک زیر را دوباره مطالعه کنید.

آموزش 15: ساخت اپلیکیشن صفحه نقاشی با اپ ایونتر

 

 

در آموزش بعدی می‌آموزیم که اندازه نقطه را چطور تغییر بدهیم.

آموزش بعد

آموزش 16: ساخت اپلیکیشن نقاشی رنگی با اپ ایونتر (قسمت اول)

مقدمه: 

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

آنچه خواهیم آموخت:

• فروکردن انگشت در سطل رنگ مجازی
• خط کشیدن با انگشت رنگی روی صفحه
• نقطه گذاشتن روی صفحه
• ساخت دکمه‌ای برای پاک کردن هر چه کشیدیم
• گذاشتن تصویر پس زمینه و نقاشی روی آن

پیش نیاز:

• توانایی ورود به سایت http://ai2.appinventor.mit.edu با کاربری گوگل
• گذراندن دوره آموزشی گربه سلام
• توانایی اتصال دستگاه اندرویدی به سایت اپ اینونتر

شروع پروژه

به سایت اپ اینونتر وارد شده، نام مناسبی برای پروژه خود انتخاب کنید. ( نام پیشنهادی ( PaintPot)).

1- از منوی جعبه طراحیسه دکمه سبز، آبی، سرخ را وارد ناظر کنید و یک دکمه هم برای پاک کردن.زیر نام دکمه‌ها. تغییر نام (Rename)را انتخاب کنید و نامشان را به سبز، آبی و سرخ دگرگون کنید. می‌توانید فارسی بنویسید. 

2-حالا از قسمت ویژگی‌ها هم رنگ دکمه را تغییر دهید و هم نام آن را.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

حالا می‌خواهیم آن‌ها را ردیف کنیم.

2-  الف) از قسمت جعبه طراحی و از بخش لایه بندی ، ردیف کردن افقی را انتخاب کنید و داخل جعبه ناظر بکشید. بالای سر چهار دکمه رها کنید.  ب) در قسمت نام اجزا نام آن را به چهار دکمه تغییر بدهید. ج) اندازه آن را پرکردن پهنا قرار بدهید. د) چهار دکمه را بکشید و داخل کادر ردیف کردن رها کنید. می‌بینید که دکمه‌ها خودشان ردیف قرار میگیرند.

 

 

همانطور که می‌بینید. برای ردیف کردن اشیا انتخاب‌های دیگری هم در لایه بندی وجود دارد. می‌توانید آن‌ها را هم انتخاب کنید. 

3- الف) بوم را به ناظر اضافه کنید. مثل آموزش‌های قبلی آن را بکشید و زیر دکمه‌ها رها کنید.  ابتدا نام دلخواهی روی آن بگذارید و سپس اندازه آن را تغییر دهید. پهنا و ارتفاع را روی پر کردن بگذارید.

ب) می‌خواهیم برای بوم خود پس زمینه انتخاب کنیم. در بخش ویژگی‌ها  روی پس زمینه (Backgrand) کلیک کنید و تصویری را اضافه کنید. پیشنهاد ما تصویر گربه اپلیکیشن گربه سلام است.  اگر تصویر بزرگ انتخاب کنید ممکن است با کمبود حافظه روبه‌رو شوید.

دانلود عکس گربه. روی عکس باز شده کلیک کنید و آن را ذخیره کنید

حالا می‌خواهیم برنامه نویسی کنیم.

ادامه در  نوشته بعدی.

آموزش(10) ساختن اپلیکیشن موش کور بازیگوش (4)

 

اضافه کردن تابلوی امتیاز

اکنون می‌خواهیم تابلوی امتیاز را بسازیم، طوری که با هر بار لمس موش کور امتیاز تازه‌ای به بازیکن داده شود.

برای این کار:

1- از قسمت (Variables) را انتخاب می‌کنیم و در قسمت نام (name) خودمان می‌نویسیم امتیاز (Scire) سپس از قسمت ریاضی (math) صفر را می‌کشیم و در دهانه‌اش رها می‌کنیم.

2- از قسمت رویّه (procedure)    را انتخاب کرده در قسمت (procedure) می‌نویسیم به روز آوری امتیاز(Update Score).

3-حالا  (Score)  را انتخاب می‌کنیم.

 

4-   را انتخاب می‌کنیم.

 

اضافه کردن زمان سنج

 

زمان سنج یک کنترل کننده رویداد است.

به قسمت طراحی بازگردید و از قسمت (sensors) ساعت (clock) را انتخاب کنید و به زیر تصویر بکشید. تصویر هم مانند صدا  جزو اشیای نادیدنی است. نام آن را به (MoveMole) تغییر دهید. 

حالا به ویرایشگر بلوک بروید از قسمت (Screen ) روی ساعت کلیک کنید(when...Timer.do)  و بعد  روی قسمت رویداد(callMoveMole) و تصویر زیر را بسازید.

آموزش(8) ساختن اپلیکیشن موش بازیگوش با اپ اینورتر(2)

اجزای اولیه

• بوم(Canvas) که نامش را (MyCanvas) می‌گذاریم. بوم جایی است که جریان بازی در آن اتفاق می‌افتد.
• برچسب (Label) که نامش را برچسب امتیاز(ScoreLabel) می‌گذاریم.برای نشان دادن امتیاز.

یک دکمه(tButton) برای شروع دوباره(ResetButton).

این موارد را به داخل نمایشگر بکشید و بعد نامشان را تغییر دهید. اندازه طول و عرض بوم را 300 پیکسل تعیین کنید. متن برچسب امتیاز را به ("--:Score") تغییر دهید. و متن شروع دوباره به (Reset). یک صدا هم وارد کنید و نامش را (Noise) بگذارید.  از این صدا وقتی استفاده می‌شود که موش کور بازیگوش را لمس می‌کنید و تلفن می‌لرزد. مثل وقتی که گربه را لمس می‌کردید. در بازی سلام گربه

اجزای زمان سنج

برای این بازی احتیاج به تعیین زمان برای بیرون پریدن موش کور است. با زمان سنج و ساعت کارهای مختلف می‌توان انجام داد مثل این که مثلا امروز چندم برج است. زمان‌های جهش به وسیله زمان سنج داخلی(TimerInterval) تعیین می‌شود. اکنون  ساعت ( Clock ) را بکشید و در قسمت نامرئی زیر بوم رها کنید و نامش را (MoleTimer) بگذارید. زمان سنج را روی 500 میلی ثانیه تعیین کنید. حواستان باشد که (TimerEnabled) تیک خورده باشد.

اضافه کردن تصویر اسپرایت

اسپرایت تصویری ست که در بوم حرکت می‌کند. هر اسپرایت چند ویژگی دارد.

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

خوب، تصویر  اسپرایت خود را وارد صفحه کنید. چه جوری؟

به قسمت (نقاشی و پویا نمایی)( Drawing and Animation) در قسمت جعبه ابزار(Palette) مراجعه کنید. آن را در بوم قرار داده و تنظیمات زیر را برای آن انجام دهید:

• تصویر(Picture): از تصویر موش کور استفاده کنید که دانلود کردید.
• گزینه قابل اجرا(Enabled) را تیک بزنید.
• مدّت وقفه(Interval) را 500 قرار بدهید. 
• محدوده(Heading) را 0 قرار بدهید.
• سرعت (Speed) : صفر
• عرض(Width): خودکار(Automatic)
• ارتفاع(Height): خودکار(Automatic)
• دیدنی(Visible) را هم تیک بزنید.

 شماباید ببینید که خصوصیات x و y قبلا پر شده باشد. این اتّفاق زمانی افتاد که شما تصویر را وارد صفحه کردید. تصویر را در بوم جابه جا کنید می‌بینید که مقدار(x) و (y) تفاوت می‌کند. شما باید همان زمان موش کور را در دستگاه متصل شده خود ببینید و هر وقت آن را در برنامه جا به جا می‌کند در تلفن شما هم حرکت می‌کند. اکنون همه ویژگی‌ها را مشخص کرده‌اید. نمایشگر برنامه شما باید مانند تصویر زیر باشد. حواستان به فهرست اسامی اجزا باشد. نام موش کور باید زیر مجموعه بوم باشد.

 

ادامه در قسمت سوم