スプライトを表示してみる

今回は画像ファイルを読み込んで画面に表示する最もシンプルな方法を試してみます。ゲームでは画面に表示される小さな矩形の画像を「スプライト」と呼びます。シューティングゲームならプレイヤー機、敵機、弾、アイテム、爆発など全てスプライトです。意外なところではスコアや残機を表示している文字もスプライトの場合が多いです。

1. 俺様が用意したサンプルをありがたく受け取れ
画像データとプログラムのソースコードを用意しました。
ダウンロードページ：mygame00.zip

ダウンロードしてワークスペースの "slick_samples" ディレクトリに展開してください。次のようなディレクトリ構造になればいいです。


次に Eclipse を起動しますが、今展開したサンプルは表示されていないと思います。[パッケージ･エクスプローラ]上のプロジェクトを右クリックしてポップアップメニューを表示し、[リフレッシュ]を選択します。


リフレッシュを実行すると追加した"mygame"ディレクトリがプロジェクトの下に現れます。その中の"MyGame00.java"が今回のソースコードになりますので、こちらを選択して実行ボタンを押します。


こんな感じでウィンドウが表示されれば成功です。


2. ソースコードの説明
MyGame00.java のソースコードは次のようになっています。

001 package mygame;
002 
003 import org.newdawn.slick.AppGameContainer;
004 import org.newdawn.slick.BasicGame;
005 import org.newdawn.slick.Color;
006 import org.newdawn.slick.GameContainer;
007 import org.newdawn.slick.Graphics;
008 import org.newdawn.slick.Image;
009 import org.newdawn.slick.SlickException;
010 
011 /**
012 スプライトを表示してみる。
013 @author フラチキさん
014 */
015 public class MyGame00 extends BasicGame {
016     // スプライトの画像
017     private Image sprite;
018 
019     /**
020     コンストラクタ
021     */
022     public MyGame00() {
023         super("MyGame00");
024     }
025 
026     /**
027     最初に一回だけ実行される初期化。
028     */
029     public void init(GameContainer container) throws SlickException {
030         container.getGraphics().setBackground(new Color(0.4f,0.6f,0.6f));
031 
032         // ファイルからスプライト画像を読み込む。
033         sprite = new Image("mygame/f15.png");
034     }
035 
036     /**
037     毎フレーム実行される描画。
038     */
039     public void render(GameContainer container, Graphics g) {
040         // スプライトを表示する。
041         sprite.draw(0, 0);
042     }
043 
044     /**
045     毎フレーム実行される更新。
046     */
047     public void update(GameContainer container, int delta) {
048     }
049 
050     /**
051     プログラムはここから実行される。
052     @param argv プログラムの起動時に渡されたコマンドライン引数。
053     */
054     public static void main(String[] argv) {
055         try {
056             AppGameContainer container = new AppGameContainer(new MyGame00());
057             container.setDisplayMode(600,800,false);
058             container.start();
059         } catch (SlickException e) {
060             e.printStackTrace();
061         }
062     }
063 }

このブログはJava言語どころかプログラミングも未経験の家の娘と息子(中2と小3)のメモも兼ねて書いているので、上のソースコードの意味がまったく分からなくても問題ないです。(何せ私もJavaはよく分からんので･･･)

上のソースコードで意味があるのは3箇所だけで、全体の流れは次のようになります。
1. スプライトの画像データを "sprite" という名前で扱うことにする。(17行目)
2. "mygame/f15.png"というファイルから画像データを読み込む。(33行目)
3. それを表示する。(41行目)

ソースコードのそれ以外の部分は「おまじない」です。「おまじない」はプログラミングにおいてとても広範囲に使われる概念で、「意味を理解する必要はないから、とりあえずこう書いとけ。省略するとプログラム動かないぞ。」というコトを意味しています。また「ゲームの内容によらずほぼ同じだからコピペでOK」もしくは「説明するのが面倒だから黙ってコピペしろ」って意味もあります。勉強してJava言語の理解が進むと意味が分かるようになるので安心してください。

016     // スプライトの画像
017     private Image sprite;

ここでは画像データを "sprite" という名前で扱うよ、ってことを宣言しています。"Image" は画像データを表すキーワードです。最初の "private" はおまじないです。

16行目はコメントと言ってプログラム内に書くメモです。後日ソースコードを見返したときに、プログラムが何やってるかとか注意点とかのメモあると思い出すのが楽になります。また他の人にソースコードを渡すときにも、そのプログラムの説明として役立ちます。コメントはプログラムの動作には一切影響しませんので自由に書くことができます。(無くても問題ないです) Javaでは「//」からその行の終わりまで、もしくは「/*」、「/**」と「*/」で囲まれた範囲がコメントです。

032         // ファイルからスプライト画像を読み込む。
033         sprite = new Image("mygame/f15.png");

"new Image(ファイル名);" はファイルから画像データを読み込むときのおまじないです。イコール記号によって、読み込んだ画像データを "sprite" という名前に代入しています。

040         // スプライトを表示する。
041         sprite.draw(0, 0);

"sprite" に代入されている画像データ("mygame/f15.png"から読み込んだ)を、画面の左上に表示します。".draw(座標);" は画像データを表示しろという命令です。表示する位置を指定する座標については次回説明します。

以上で画像データを読み込んで画面に表示する最も簡単な流れが理解できました。今回はF-15戦闘機の画像を用意しましたが、試しにお好みの画像ファイルに代えてみたらよいと思います。その場合は "mygame" ディレクトリにファイルをコピーし、33行目のファイル名を変更すればOKです。東方でも何でも好きな画像で楽しんでください。

カテゴリのトップへ