ساخت انیمیشن قسمت اول (بازیسازی با جاوا)

1395/10/12 لیلا کشاورز 1990

عرض سلام و ادب

با قسمت سوم از سری آموزش های بازیسازی با جاوا در خدمتتون هستم.
انشاالله که از این قسمت هم استفاده ی کافی رو ببرید .

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

در این آموزش، قصد داریم تصویر یک مثلث رو درون Board  مون از گوشه ی سمت چپ بالای پنجره به سمت گوشه ی سمت راست پایین،به حرکت در بیاریم و در واقع یک انیمیشن بسازیم.
برای ایجاد انیمیشن دربازیسازی با جاوا ، راههای زیادی وجود داره .
اول از همه، پروژمون رو با روشی ارائه میدیم که شاید ساده ترین این روشها باشه و کارامدی اون در بازیهای ساده و 2 بعدی هست.

استفاده از Swing timer:
از کنترل timer  از دسته کنترلهای Swing ،  در این روش استفاده میکنیم.
به این معنی که حرکت تصویر ، در بازه های زمانی متوالی ای که به کمک timer  ها ایجادش میکنیم،بارها و بارها فراخوانی میشه تا انیمیشن ساخته بشه .

خب طبق روال گذشته یک پروژه ی جدید ایجاد میکنیم و کلاس اصلی برنامه (کلاس Board) رو مطابق معمول در یک کنترل Jpanel میسازیم.

این فرم کلی کلاس Board  ما خواهد بود،که با توضیحات بخش به بخشمان ،در نهایت به آن خواهیم رسید:

import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.Jpanel;
import javax.swing.Timer;
public class Board extends Jpanel implements ActionListener{
    Image triangle;
    Timer timer;
    int x, y;
}
 public Board (){
       setBackground(Color.WHITE);
      ImageIcon ii =
           ( "new ImageIcon(this.getClass().getResource(“triangle.jpg"));
     triangle = ii.getImage ();
       setDoubleBuffered(true);
       x = y = 10;
        timer = new Timer(this);30
        timer.start();
    }
    public void paint(Graphics g) {
        super.paint(g);

       Graphics2D g2d = (Graphics2D)g;
        g2d.drawImage(triangle, x, y, this);
        Toolkit.getDefaultToolkit().sync();
  g.dispose();
   }
    public void actionPerformed(ActionEvent e){
        x += 1;
        y += 1;
       if (y > 240){
           y = -45;
           x = -45;
  }
   repaint();
    }
}

قبل از اینکه به تحلیل کد بپردازیم ، ابتدا تصویر مورد نظر رو در محل ذخیره ی پروژه  و در جایی که کلاس فوق قرار داره کپی کنید(همونطور که در جلسات گذشته بهش اشاره کردیم.)

خب، به کد نگاه کنید:
- اول از همه شی ای از کلاس image  تولید میکنیم (که بعدا برای به نمایش درآوردن عکس فوق ازش استفاده میکنیم.)
- بعد از اون شی ای از کلاس Timer ایجاد کردیم برای زمان حرکت تصویرمون.
- در کلاس Board  با دستور(color.WHITE) setBackground زمینه ی پنجره ی خروجی رو به رنگ سفید در آوردیم.

- با دستورات زیر هم که از اموزشهای قبل آشنایی دارید. تصویری رو که در محل ذخیره ی پروژه کپی کرده بودیم رو به برنامه معرفی کردیم و اون رو  در اختیار گرفتیم تا بعدا به نمایش در بیاریمش.

ImageIcon ii=
            new ImageIcon(this.getClass().getResource(“triangle.jpg"));
     triangle = ii.getImage();

- از اونجایی که کل ترسیماتی که انجام میشه ،قبل از اینکه به نمایش دربیاد ابتدا بر روی حافظه قرار میگیرن و سپس از بافر به روی صفحه برنامه کپی میشن ، از دستور( SetDoubleBuffered(true استفاده میکنیم (به این معنا که کنترل Jpanel  برای رسم ، از بافر استفاده میکنه.)

- با استفاده از دستورات زیر یک شی از کلاس Swing Timer ایجاد  کردیم و سپس تایمر رو فعال کردیم .
که با این کار هر 30 میلی ثانیه یکبار دستورات رویداد actionPerformed  (که جلوتر در موردش توضیح میدیم) فراخوانی می شن .(واضحه که هرچه این مقدار عددی رو افزایش بدیم، حرکت تصویر کندتر میشه و برعکس.)

 

 timer = new Timer(30, this);
        timer.start();

- حالا وقت اینه که تصویرمون رو به نمایش در بیاریم، در کلاس paint به کمک دستور;( drawImage(triangle, x, y, this
 اینکار رو انجام میدیم ،دو مولفه ی x,y هم همانطور که در مقاله ی قبل اشاره شد، همون فاصله ی تصویر از بالا و سمت چپ پنجره ی خروجی است،که آنها رو از نوع Int  معرفی و مقداردهی کردیم.
حالا ممکنه این سوال براتون پیش بیاد که چرا این اندازه رو مستقیما وارد نکردیم(مثل کاری که در مثال جلسه قبل انجام دادیم) !
 بلکه متغییر تعریف کردیم و جداگانه متغیرهای x,y رو مقداردهی کردیم.
واضحه!بخاطر اینکه در مثال قبل ما میخواستیم که تصویرمون در یک فاصله ی ثابتی از گوشه ی پنجره قرار بگیره و صرفا "در همون مکان " به نمایش دربیاد .اما اینجا، قصد داریم که تصویرمون حرکت کنه،و این مستلزم اینه که فاصله ای که گفته شد مدام تغییر کنه. پس بجای اینکه مستقیما مقداردهی کنیمشون،به شکل متغییر تعریف میکنیمشون که بعدا بتونیم راحت مقدارشو هر بار تغییر بدیم.

Public void paint(Graphics g) {
        super.paint(g);

  Graphics2D g2d = (Graphics2D)g;
        g2d.drawImage(triangle, x, y, this);

حرکت تصویرمون باید طی یک ریتم منظم شکل بگیره وبایستی به طور پیوسته در پنجره ی خروجی به حرکت دربیاد.

این پیوستگی رو توسط synchronize و با دستور زیر ایجاد میکنیم:
 

Toolkit.getDefaultToolkit().sync();
   g.dispose();

برای اینکه به تصویرمون  قابلیت حرکت بدیم ، باید از actionPerformed استفاده کنیم.
در این کلاس میزان افزایش مختصه ی x,y  رو در هر مرحله مشخص میکنیم.

اما برای استفاده از این کلاس لازم هست که ابتدا متدActionListener رو پیاده سازی کنیم.که برای این،لازمه که کلاس اصلیمون (Board) از  ActionListener، implement  شده باشه.

به تابع actionPerformed  برمیگردیم، در این تابع مقدار افزایش X , Y  تصویر رو بزای هر بار حرکت ، 1 در نظر گرفتیم.واضحه که اگر این مقداررو افزایش بدیم، حرکت تصویر رو سریعتر میبینیم.

Public void actionPerformed(ActionEvent e){
        x += 1;
       y += 1;


 اما این کافی نیست.
باید متد repaint()  رو هم  فراخوانی کنیم  تا گرافیکهای رسم شده بر روی کامپوننت های swing بروز رسانی بشن . در واقعrepaint()  ،متد paint()   رو بارها و بارها فراخوانی میکنه،و اگر این متد رو قرار ندیم تصویر حرکت نمیکنه .
خب ، کلاس main  رو هم مطابق آموزش قبل ایجاد کنید :


 

بازی سازی با جاوا

با اجرای برنامه ، میبینید که مثلث  از گوشه سمت چپ بالای پنجره ی خروجی به سمت راست پایین پنجره حرکت میکنه ، اما وقتی از گوشه ی سمت راست پنجره خارج میشه، دیگه ظاهر نمیشه.(در صورتیکه ما میخواستیم این حرکت همواره ادامه پیدا کنه.)

 

ساخت انیمیشن با جاوا

برای حل این مشکل چکار باید کرد ؟
چکار کنیم که حرکت تصویرمون با خارج شدن از گوشه ی سمت راست board  مون، متوقف نشه؟

برای این جلسه فکر میکنم کافی باشه.
این مشکل رو در ابتدای جلسه آینده رفعش میکنیم. تا اون موقع شما هم روش فکر کنید.

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

کلمات کلیدی