スプライトを表示してみる
今回は画像ファイルを読み込んで画面に表示する最もシンプルな方法を試してみます。ゲームでは画面に表示される小さな矩形の画像を「スプライト」と呼びます。シューティングゲームならプレイヤー機、敵機、弾、アイテム、爆発など全てスプライトです。意外なところではスコアや残機を表示している文字もスプライトの場合が多いです。
1. 俺様が用意したサンプルをありがたく受け取れ
画像データとプログラムのソースコードを用意しました。
ダウンロードページ:mygame00.zip
ダウンロードしてワークスペースの "slick_samples" ディレクトリに展開してください。次のようなディレクトリ構造になればいいです。

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

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

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

2. ソースコードの説明
MyGame00.java のソースコードは次のようになっています。
このブログはJava言語どころかプログラミングも未経験の家の娘と息子(中2と小3)のメモも兼ねて書いているので、上のソースコードの意味がまったく分からなくても問題ないです。(何せ私もJavaはよく分からんので・・・)
上のソースコードで意味があるのは3箇所だけで、全体の流れは次のようになります。
1. スプライトの画像データを "sprite" という名前で扱うことにする。(17行目)
2. "mygame/f15.png"というファイルから画像データを読み込む。(33行目)
3. それを表示する。(41行目)
ソースコードのそれ以外の部分は「おまじない」です。「おまじない」はプログラミングにおいてとても広範囲に使われる概念で、「意味を理解する必要はないから、とりあえずこう書いとけ。省略するとプログラム動かないぞ。」というコトを意味しています。また「ゲームの内容によらずほぼ同じだからコピペでOK」もしくは「説明するのが面倒だから黙ってコピペしろ」って意味もあります。勉強してJava言語の理解が進むと意味が分かるようになるので安心してください。
16行目はコメントと言ってプログラム内に書くメモです。後日ソースコードを見返したときに、プログラムが何やってるかとか注意点とかのメモあると思い出すのが楽になります。また他の人にソースコードを渡すときにも、そのプログラムの説明として役立ちます。コメントはプログラムの動作には一切影響しませんので自由に書くことができます。(無くても問題ないです) Javaでは「//」からその行の終わりまで、もしくは「/*」、「/**」と「*/」で囲まれた範囲がコメントです。
以上で画像データを読み込んで画面に表示する最も簡単な流れが理解できました。今回はF-15戦闘機の画像を用意しましたが、試しにお好みの画像ファイルに代えてみたらよいと思います。その場合は "mygame" ディレクトリにファイルをコピーし、33行目のファイル名を変更すればOKです。東方でも何でも好きな画像で楽しんでください。
カテゴリのトップへ
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言語の理解が進むと意味が分かるようになるので安心してください。
ここでは画像データを "sprite" という名前で扱うよ、ってことを宣言しています。"Image" は画像データを表すキーワードです。最初の "private" はおまじないです。016 // スプライトの画像
017 private Image sprite;
16行目はコメントと言ってプログラム内に書くメモです。後日ソースコードを見返したときに、プログラムが何やってるかとか注意点とかのメモあると思い出すのが楽になります。また他の人にソースコードを渡すときにも、そのプログラムの説明として役立ちます。コメントはプログラムの動作には一切影響しませんので自由に書くことができます。(無くても問題ないです) Javaでは「//」からその行の終わりまで、もしくは「/*」、「/**」と「*/」で囲まれた範囲がコメントです。
"new Image(ファイル名);" はファイルから画像データを読み込むときのおまじないです。イコール記号によって、読み込んだ画像データを "sprite" という名前に代入しています。032 // ファイルからスプライト画像を読み込む。
033 sprite = new Image("mygame/f15.png");
"sprite" に代入されている画像データ("mygame/f15.png"から読み込んだ)を、画面の左上に表示します。".draw(座標);" は画像データを表示しろという命令です。表示する位置を指定する座標については次回説明します。040 // スプライトを表示する。
041 sprite.draw(0, 0);
以上で画像データを読み込んで画面に表示する最も簡単な流れが理解できました。今回はF-15戦闘機の画像を用意しましたが、試しにお好みの画像ファイルに代えてみたらよいと思います。その場合は "mygame" ディレクトリにファイルをコピーし、33行目のファイル名を変更すればOKです。東方でも何でも好きな画像で楽しんでください。
カテゴリのトップへ
- 関連記事
スポンサーサイト
コメント
コメントの投稿
« 娘ミニベロのサドル交換 l ホーム l Eclipse + Slick2D のセットアップ(サンプルの実行まで) »