1 / 92

ＪＡＶＡ　ＧＵＩプログラミング

ＪＡＶＡ　ＧＵＩプログラミング. 第４回 スレッドを使った 簡単なアニメーション. アニメーションの原理. 今日作るアニメーションはパラパラ漫画のようにします。. つまり、画面を少しずつ変えて表示していきます。. では早速、今日のサンプル①です. import javax.swing.*; import java.awt.*; public class ex6 extends JApplet implements Runnable { int x,y; Thread anime=null; public void init() {

kermit
Download Presentation

ＪＡＶＡ　ＧＵＩプログラミング

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ＪＡＶＡ　ＧＵＩプログラミング 第４回 スレッドを使った 簡単なアニメーション

  2. アニメーションの原理 今日作るアニメーションはパラパラ漫画のようにします。 つまり、画面を少しずつ変えて表示していきます。

  3. では早速、今日のサンプル①です import javax.swing.*; import java.awt.*; public class ex6 extends JApplet implements Runnable { int x,y; Thread anime=null; public void init() { x=100;y=100; anime=new Thread(this); anime.start(); }

  4. サンプル① public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); g.setColor(Color.black); g.fillOval(x,y,100,100); }

  5. サンプル① public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } }

  6. どうですか？ 塗りつぶされた円が動いていますね。 ではなぜ円が動くのかを解説していきましょう。

  7. 解説① import部 import javax.swing.*; import java.awt.*; 今回はこの２つをimportします。

  8. 解説①　宣言部 public class ex6 extends JApplet implements Runnable { int x,y; Thread anime=null;

  9. 解説①　宣言部 public class ex6 extends JApplet implements Runnable { int x,y; Thread anime=null; スレッドを使うときには 必ずrunnableをインプリメントします。

  10. 解説①　宣言部 public class ex6 extends JApplet implements Runnable { int x,y; Thread anime=null; 整数型の変数x,yを宣言しておきます。

  11. 解説①　宣言部 public class ex6 extends JApplet implements Runnable { int x,y; Thread anime=null; animeという名のスレッドを定義します。 anime=nullというのは まだスレッドを使える状態にしないことを意味しています。

  12. 解説①　init部 public void init() { x=100;y=100; anime=new Thread(this); anime.start(); }

  13. 解説①　init部 public void init() { x=100;y=100; anime=new Thread(this); anime.start(); } xとｙの初期値をともに１００にしておきます。

  14. 解説①　init部 public void init() { x=100;y=100; anime=new Thread(this); anime.start(); } スレッドであるanimeを使える状況にします。

  15. 解説①　init部 public void init() { x=100;y=100; anime=new Thread(this); anime.start(); } スレッドであるａｎｉｍｅを開始します。 これによって、public　ｖｏｉｄ　ｒｕｎ・・ の部分が実行されます。

  16. 解説①　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); g.setColor(Color.black); g.fillOval(x,y,100,100); }

  17. 解説①　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); g.setColor(Color.black); g.fillOval(x,y,100,100); } 色を白に設定し、 画面を白く塗りつぶします。

  18. 解説①　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); g.setColor(Color.black); g.fillOval(x,y,100,100); } 色を黒に設定して 塗りつぶした円を描きます

  19. 解説①　run部 public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } }

  20. 解説①　run部 public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } While文ですね・・ この文はanimeがnullでない間繰り返す という意味です。 ただし、animeはinitの部分で使える 状態にしたので無限ループになります。

  21. 解説①　run部 public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } Ｘの値を ５増やします。

  22. 解説①　run部 public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } paint部をもう一度実行します。

  23. 解説①　run部 public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } もし、ｘが５００を越えたら、 ｘ＝０にしてあげます。

  24. 解説①　run部 public void run() { while (anime!=null) { x+=5; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } ここはスリープの部分です。 Sleep(100)は０．１秒まつことを意味してます。

  25. 解説①　全体の流れ まずinit部でスレッド（anime）を使える状態にします。 そしてｒｕｎの部分が呼び出され・・ ①塗りつぶした円を描く ②ｘの値を増やす ③０．１秒止める これらを無限に繰り返します。

  26. こんな感じです。 どうでしょうか？ 多少画面がちらついていますが、 これを解決するには ダブルバッファリングという技法を使いますが、 今日は行いません。

  27. 次に・・ ただ円を動かしただけではつまらないので 次にイメージ（画像ファイル）を 動かしてみましょう。

  28. 画像は・・ この４枚の画像を使います。 絵が下手ですいません・・

  29. いきなりサンプル②です。 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4;

  30. いきなりサンプル②です。 public void init() { x=100;y=100;flag=0; image1=getImage(getCodeBase(),"s1.jpg"); image2=getImage(getCodeBase(),"s2.jpg"); image3=getImage(getCodeBase(),"s3.jpg"); image4=getImage(getCodeBase(),"s4.jpg"); anime=new Thread(this); anime.start(); }

  31. いきなりサンプル②です。 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); if ((flag % 4)==0) g.drawImage(image1,x,y,this); if ((flag % 4)==1) g.drawImage(image2,x,y,this); if ((flag % 4)==2) g.drawImage(image3,x,y,this); if ((flag % 4)==3) g.drawImage(image4,x,y,this); }

  32. いきなりサンプル②です。 public void run() { while (anime!=null) { x+=5; flag+=1; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } }

  33. 解説　サンプル②　宣言部 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4;

  34. 解説　サンプル②　宣言部 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4; 今回もこの３つをｉｍｐｏｒｔします

  35. 解説　サンプル②　宣言部 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4; 今回もスレッドを使うので、このように書きます

  36. 解説　サンプル②　宣言部 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4; 変数ｘ、ｙ、ｆｌａｇを用意します

  37. 解説　サンプル②　宣言部 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4; スレッドはｎｕｌｌにしておきます

  38. 解説　サンプル②　宣言部 import javax.swing.*; import java.awt.*; import java.awt.image.*; public class ex7 extends JApplet implements Runnable { int x,y,flag; Thread anime=null; Image image1,image2,image3,image4; ４枚のイメージを定義します

  39. 解説　サンプル②　ｉｎｉｔ部 public void init() { x=100;y=100;flag=0; image1=getImage(getCodeBase(),"s1.jpg"); image2=getImage(getCodeBase(),"s2.jpg"); image3=getImage(getCodeBase(),"s3.jpg"); image4=getImage(getCodeBase(),"s4.jpg"); anime=new Thread(this); anime.start(); }

  40. 解説　サンプル②　ｉｎｉｔ部 public void init() { x=100;y=100;flag=0; image1=getImage(getCodeBase(),"s1.jpg"); image2=getImage(getCodeBase(),"s2.jpg"); image3=getImage(getCodeBase(),"s3.jpg"); image4=getImage(getCodeBase(),"s4.jpg"); anime=new Thread(this); anime.start(); } 初期値をこのようにします

  41. 解説　サンプル②　ｉｎｉｔ部 public void init() { x=100;y=100;flag=0; image1=getImage(getCodeBase(),"s1.jpg"); image2=getImage(getCodeBase(),"s2.jpg"); image3=getImage(getCodeBase(),"s3.jpg"); image4=getImage(getCodeBase(),"s4.jpg"); anime=new Thread(this); anime.start(); } ４枚のイメージを読み込んでいる部分です

  42. 解説　サンプル②　ｉｎｉｔ部 public void init() { x=100;y=100;flag=0; image1=getImage(getCodeBase(),"s1.jpg"); image2=getImage(getCodeBase(),"s2.jpg"); image3=getImage(getCodeBase(),"s3.jpg"); image4=getImage(getCodeBase(),"s4.jpg"); anime=new Thread(this); anime.start(); } スレッドを使える状況 にします

  43. 解説　サンプル②　ｉｎｉｔ部 public void init() { x=100;y=100;flag=0; image1=getImage(getCodeBase(),"s1.jpg"); image2=getImage(getCodeBase(),"s2.jpg"); image3=getImage(getCodeBase(),"s3.jpg"); image4=getImage(getCodeBase(),"s4.jpg"); anime=new Thread(this); anime.start(); } スレッドを開始します ここでｒｕｎ（）の部分が実行されます

  44. 解説　サンプル②　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); if ((flag % 4)==0) g.drawImage(image1,x,y,this); if ((flag % 4)==1) g.drawImage(image2,x,y,this); if ((flag % 4)==2) g.drawImage(image3,x,y,this); if ((flag % 4)==3) g.drawImage(image4,x,y,this); }

  45. 解説　サンプル②　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); if ((flag % 4)==0) g.drawImage(image1,x,y,this); if ((flag % 4)==1) g.drawImage(image2,x,y,this); if ((flag % 4)==2) g.drawImage(image3,x,y,this); if ((flag % 4)==3) g.drawImage(image4,x,y,this); } 色を白に設定し 画面を白で塗りつぶします

  46. 解説　サンプル②　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); if ((flag % 4)==0) g.drawImage(image1,x,y,this); if ((flag % 4)==1) g.drawImage(image2,x,y,this); if ((flag % 4)==2) g.drawImage(image3,x,y,this); if ((flag % 4)==3) g.drawImage(image4,x,y,this); } ％は余り（mod）を意味します

  47. 解説　サンプル②　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); if ((flag % 4)==0) g.drawImage(image1,x,y,this); if ((flag % 4)==1) g.drawImage(image2,x,y,this); if ((flag % 4)==2) g.drawImage(image3,x,y,this); if ((flag % 4)==3) g.drawImage(image4,x,y,this); } ここは、イメージを画面に描くところです

  48. 解説　サンプル②　ｐａｉｎｔ部 public void paint(Graphics g) { g.setColor(Color.white); g.fillRect(0,0,500,500); if ((flag % 4)==0) g.drawImage(image1,x,y,this); if ((flag % 4)==1) g.drawImage(image2,x,y,this); if ((flag % 4)==2) g.drawImage(image3,x,y,this); if ((flag % 4)==3) g.drawImage(image4,x,y,this); } Ｆｌａｇに応じて描かせたいイメージを描きます

  49. 解説　サンプル②　ｒｕｎ部 public void run() { while (anime!=null) { x+=5; flag+=1; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } }

  50. 解説　サンプル②　ｒｕｎ部 public void run() { while (anime!=null) { x+=5; flag+=1; repaint(); if (x>500) {x=0;} try { Thread.sleep(100); } catch (InterruptedException e) {}; } } サンプル①と同様無限ループ

More Related