pcat (2) 画像を表示する

何を作るか大体きまったので始めていきます。まずはステージを1つ作ります。

ステージというものにどのようなものをイメージしているかというと、一言でいうとマリオのステージ1-1みたいなのです。別にマリオのクローンを作ろうとしているわけではなく、大体のイメージです。

ステージをどのよう見せるかというと、上の図のように四角形の塗りつぶしだけで組み立てることも可能です。しかしあまり楽しそうではないので、画像を使って組み立てるようにします。そこで、これまで作ったものの中ではまだ画像を表示させるコードは書いてなかったので、まずはそれをやります。

画像とはなにか

コードを書く前に予備知識としていくつか調査しておきます。このセクションは適当に書いているので鵜呑みにしないでください。むしろ読む必要すらありません。

まとめておきます。

• 画像とは、人間同士のやり取りで表示されているものやそのファイルを指して画像と呼ぶ。正確に何を指しているかは文脈による。
• 画像は特定のフォーマットに従ってプログラムが解釈できるようにしたものである。
• 画像ファイルにはファイルヘッダーとイメージデータが含まれている。
• 画像ファイルのフォーマットは拡張子によって、動作している環境(OS)にどのフォーマットであるか伝達して、プログラムを起動して、プログラムは画像ファイルのヘッダーを読み込んでイメージデータを解釈する。
• 画像ファイルのフォーマットはたくさんある。.jpgや.pngなどがインターネットで広く使われている。
• 自分のプログラムでしか使わないのでイメージデータのフォーマットを伝達する必要がないならファイルヘッダー部分を省いてイメージデータだけをファイルに格納するようすることもできる。
• 画像は人間だけでは処理できない。プログラムの助けが必要になる。
• 画像は最終的にディスプレイによって光に変換されて人間の目に入ってきて、神経を介して電気信号が脳みそに伝達されてそれを画像だと認識させる。

テクスチャとスプライト

くだらない考察は終わりにして、実際何をすればいいのかを検討していきます。くだらないと言いながらも先の考察で得られた実用的なものの一つに、イメージデータをなんとかしてグラフィックスハードウェアに伝達しないといけないということがあります。それをするにはどうするかということです。

1. ビデオメモリに直接アクセスする(無理)。
2. デバイスドライバにアクセスする。
3. OSにお願いする。
4. DirectXやOpenGLといったグラフィックスAPIを使う。

これらのどれも使いません。前回書いたのですが、SFMLというライブラリを使うことにしました。このライブラリを使えば恐ろしく簡単に画像を読み込んだりディスプレイに表示したりできるようになります。SFMLが内部的にどのようにして実現しているかまではわかってませんが、とにかくこう書けば動くというとこまでは分かります。完全にブラックボックス化してしまうというわけでもなく、ソースコードは公開されているので知りたければソースを読むことで知ることが出来ます。ですが、今はゲームを作ることが目的であるので詳細までは追い求めないことにします。

SFMLで画像を扱うにあたって知っておくべきことがあります。テクスチャとスプライトという用語です。SFMLのチュートリアルには次のように書かれています。

A texture is an image. But we call it "texture" because it has a very specific role: being mapped to a 2D entity.

テクスチャは画像です。しかし、2Dエンティティにマッピングされるという非常に特殊な役割があるため、これを「テクスチャ」と呼びます。

A sprite is nothing more than a textured rectangle.

スプライトは、テクスチャを持つ長方形にすぎません。

Sprites and textures (SFML / Learn / 2.5 Tutorials)

画像を表示するコードも上の引用元のリンク先を読めば良いのであまりこれから先書き続ける意義が薄れてきた気もするのですが気にしないでおきます。

SFMLではスプライトという用語は上のように定義されています。スプライトはSFMLに固有の呼び名というわけではなく広く使われています。しかし、その意味するところは安定していません。だいたいゲームに関連するグラフィックスの要素をさして使われいる点では共通しています。より広く使われているのはゲームに使えるグラフィックスの要素を貼り付けた画像という感じで使われています。複数の要素をパックにしたものはスプライトシートなどと呼ばれています。上でSFMLがテクスチャと呼んでいるものに近く混乱しやすいです。

世間でどう呼ばれていようが、これからはSFMLを使うのでSFMLの呼び方に従います。SFMLでテクスチャに対応するものはsf::Textureで、スプライトに対応するものはsf::Spriteとなっています。さらに2Dエンティティにマッピングされない単なる画像に対応するものもありsf::Imageとなっています。

テクスチャは画像ファイルのパスを指定することでそのファイルのイメージデータを保持したものを作成することが出来ます。

#include <SFML/Graphics.hpp>

int main() {
  sf::Texture texture;
  if (!texture.loadFromFile("1.png")) {
    return 1;
  }
}

このコードのソースファイル名がtexture_example.cppだとすると、コンパイルするには次のようにします。

g++ texture_example.cpp -lsfml-system -lsfml-window -lsfml-graphics -o texture_example

コンパイルに成功すれば、次のコマンドで実行できます。

./texture_example
Failed to load image "1.png". Reason: Unable to open file

エラーメッセージはSFMLが生成したものです。明示的にエラーメッセージを出力するようには記述していませんが、コンソールで実行した場合は自動で出力されるようになっているようです。ロードに失敗した場合、このエラーメッセージを確認することで何が問題なのか特定するのに役に立ちます。上では1.pngというファイルを開けないと言っています。とりあえず1.pngというファイルを用意して配置します。1.pngはさしあたって次のような画像を使うことにします。

この画像は32x32ピクセルのPNG画像でステージの地面に使うつもりで適当に作ったものです。配置してプログラムを実行すればエラーメッセージは出力されなくなります。

sf::Texture::loadFromFileが扱える画像ファイルのフォーマットは bmp, png, tga, jpg, gif, psd, hdr, pic の8種類だそうです。sf::Image::loadFromFileに書かれています。なぜsf::Imageの方を参照しているかというと、sf::Texture::loadFromFileは、次のコードと同等だからです。

sf::Image image;
image.loadFromFile(filename);
texture.loadFromImage(image, area);

テクスチャに画像ファイルを読み込むことが出来ました。しかし、テクスチャ自体には画面に表示させるための能力がありません。

テクスチャを画面に表示させるにはスプライトにマッピングする必要があります。

#include <SFML/Graphics.hpp>
    
int main() {
  sf::Texture texture;
  if (!texture.loadFromFile("1.png")) {
    return 1;
  }
  
  sf::Sprite sprite;
  sprite.setTexture(texture);

}

sf::Spriteのコンストラクタにはテクスチャを引数とするものが用意されているので1行で書くことも出来ます。

sf::Sprite sprite{texture};

また、sf::Sprite::setTextureRectや、テクスチャともう1つ引数に取るコンストラクタの引数に矩形の範囲を指定して、サブ矩形を取り扱うことが出来ます。言い換えればテクスチャのどの部分をスプライトにマッピングするか指定することが出来ます。

sf::Sprite::setTextureRectは次のようにします。

sf::Sprite sprite;
sprite.setTexture(texture);
sprite.setTextureRect(sf::IntRect{0, 0, 16, 16});

コンストラクタで指定する場合は次のようにします。

sf::Sprite sprite{texture, sf::IntRect::{0, 0, 16, 16}};

sf::Spriteはsf::Drawableを継承しているので、sf::RenderTarget::drawでレンダーターゲットに描画することが出来ます。特に、sf::RenderWindow::drawでウィンドウに描画することが出来ます。

今回使用する画像には32x32のタイル(このように正方形パターンからなる画像のことをタイルと呼びます)が1枚含まれているだけなので、画像全体を使用します。したがって、サブ矩形は使用しません。

これまでのコードを合わせてウィンドウに画像を表示する最もシンプルと思われるコード全体を書いてみます。

ウィンドウのサイズは320x240 ((32*10)x(32*7.5))です。

#include <SFML/Graphics.hpp>

int main() {
  sf::RenderWindow window{sf::VideoMode{320, 240}, "pcat"};

  sf::Texture texture;
  if (!texture.loadFromFile("1.png")) {
    return 1;
  }

  sf::Sprite sprite{texture};

  while (window.isOpen()) {
    sf::Event event;
    while (window.pollEvent(event)) {
      if (event.type == sf::Event::Closed) {
        window.close();
      }
    }

    window.clear(sf::Color{0, 0, 255});
    window.draw(sprite);
    window.display();
  }
}

このコードをコンパイルして実行すると次のような結果が得られます。

画面左上に一つ表示することが出来ました。

この画像は地面のつもりで用意したものです。簡単な修正で画面下に並べて表示することができるので、それをやってみます。

sf::Sprite::setPositionで描画させる位置を指定することが出来ます。スプライトの大きさの取得はちょっと分かりづらいです。sf::Sprite::getTextureRectでマップされているテクスチャの矩形情報が取得できます。もし、スプライトがスケール(拡大縮小)されていると、スプライトの大きさとマッチしないのでsf::Sprite::getScaleで得られる値と乗算する必要があります。しかし、今はスプライトをスケーリングしないのでgetTextureRectの値をそのまま使うことが出来ます。

#include <SFML/Graphics.hpp>

int main() {
  sf::RenderWindow window{sf::VideoMode{320, 240}, "pcat"};

  sf::Texture texture;
  if (!texture.loadFromFile("1.png")) {
    return 1;
  }

  std::vector<sf::Sprite> ground(10);
  for (size_t i = 0; i < ground.size(); ++i) {
    ground[i].setTexture(texture);
    ground[i].setPosition(
        i * ground[i].getTextureRect().width,
        window.getSize().y - ground[i].getTextureRect().height);
  }

  while (window.isOpen()) {
    sf::Event event;
    while (window.pollEvent(event)) {
      if (event.type == sf::Event::Closed) {
        window.close();
      }
    }

    window.clear(sf::Color{0, 0, 255});

    for (auto &s : ground) {
      window.draw(s);
    }

    window.display();
  }
}

コンパイルして実行すると次のような画面になります。

一応地面っぽく見えなくもないような地面ができました。

参考

今回使用したSFMLのドキュメントへのリンクを載せておきます。

• Tutorials for SFML 2.5 Sprites and textures
• sf::Texture Class Reference
• sf::Sprite Class Reference
• sf::Image Class Reference