mieki256's diary

とりあえず、一番簡単に使えそうな ImageSprite を使って描画してみる。


_imagesprite.py
_cutegirl.png
_cutegirl2.png

u"""
pi3d ImageSprite sample.

スプライトを描画するサンプル。
平行投影で描画。
ESCキーで終了する。

Windows10 x64 + Python 2.7.12 32bit + pi3d 2.20
"""
from __future__ import absolute_import
from __future__ import division
from __future__ import print_function
from __future__ import unicode_literals
import pi3d

# ウインドウ生成
display = pi3d.Display.create(w=640, h=480, frames_per_second=60)

# シェーダーを生成。uv_flatは照明関係の計算をしない。
shader = pi3d.Shader("uv_flat")

# カメラを平行投影に
camera = pi3d.Camera(is_3d=False)

# テクスチャを読み込み
tex = pi3d.Texture("cutegirl.png", blend=False, filter=pi3d.GL_NEAREST)
# tex = pi3d.Texture("cutegirl2.png", blend=False, filter=pi3d.GL_NEAREST)

# スプライトを生成
sprite0 = pi3d.ImageSprite(tex, shader,
                           w=256.0, h=256.0, x=0.0, y=0.0)
sprite1 = pi3d.ImageSprite(tex, shader,
                           w=256.0, h=256.0, x=128.0, y=128.0)

print("sprite0.z() = %d" % sprite0.z())  # z=20.0
print("sprite1.z() = %d" % sprite1.z())

# キーボード取得用クラスを生成
keys = pi3d.Keyboard()

# メインループ
while display.loop_running():

    # スプライトを描画
    sprite0.draw()
    sprite1.draw()

    if keys.read() == 27:
        # ESCキーが押されたらループを抜けて終了
        keys.close()
        display.destroy()
        break

画像は、 _OpenGameArt.org の、 _Cute Girl - Free Sprites を使わせてもらいました。ありがたや。この画像、可愛いな…。しかもライセンスが CC0 だし…。

ソースにコメントを書きまくったから、眺めれば分かりそうではあるけど、一応。

画像の色をそのまま出したいときは、uv_flat という種類のシェーダーを使うといいらしい。shader = pi3d.Shader("uv_flat") で用意してる。

_pi3d.Shader - pi3d 2.21 documentation によると、テクスチャ画像を使いたいときはシェーダー種類を示す文字列の頭に「uv_」と付くらしい。「flat」は、照明関係の計算をしないでフラットな状態で描画、ということかなと。

2D描画をしたいので、透視投影ではなく平行投影にする。そのために、カメラを用意して設定する。camera = pi3d.Camera(is_3d=False) で、「このカメラは、3Dっぽく描画しないでくれ＝平行投影にしてくれ」と指定してるのだろう…。

画像を描画したいので、テクスチャ画像として読み込む。tex = pi3d.Texture("テクスチャ画像のパス") でテクスチャとして読み込める。

テクスチャ読み込み時の、blend指定の意味は、ちょっとよく分からなかった。filter指定は、拡大縮小時にどんなフィルタをかけるか、だろうけど。 _pi3d.Texture - pi3d 2.21 documentation によれば、フィルタ種類として pi3d.GL_NEAREST や pi3d.GL_LINEAR が指定できるらしい。GL_NEAREST はクッキリだけどジャギジャギ。GL_LINEAR は滑らかだけどぼやける。てな認識でいいんじゃないかな…。 _Textures で紹介されてる画像を眺めれば分かるかなと。

ちなみにドキュメントには、「テクスチャ画像のサイズは、4, 8, 16, 32, 48, 64, 72, 96, 128, 144, 192, 256, 288, 384, 512, 576, 640, 720, 768, 800, 960, 1024, 1080, 1920 てな感じのキリのいい値にしておいてね」と書いてある。

画像を使うスプライトは、以下で生成できる。

sprite0 = pi3d.ImageSprite(テクスチャ, シェーダー,
                           w=幅, h=高さ, x=x座標, y=y座標)

そして、この場合は平行投影だから、幅、高さ、座標はドット単位で指定すればいいのだろう…。たぶん。

pi3d.ImageSprite() のテクスチャのところに、直接、画像のパスを書いても、画像をテクスチャとして読み込んで使ってくれる模様。ただ、同じ画像を他のスプライトでも使いたい場合は、別途テクスチャとして読み込んでソレを指定したほうが確実かもしれず。

と思ったけど、 _pi3d/Sprite.py at master - tipam/pi3d を眺めたら、既にテクスチャが読み込まれているならそっちを流用する、てな実装になってる、ように見えなくもないな…。

前述のソースは平行投影で描画してるけど、透視投影でも描画してみる。


_imagesprite2.py

u"""
pi3d ImageSprite sample.

スプライトを描画するサンプル。
透視投影で描画。
ESCキーで終了する。

Windows10 x64 + Python 2.7.12 32bit + pi3d 2.20
"""
from __future__ import absolute_import
from __future__ import division
from __future__ import print_function
from __future__ import unicode_literals
import pi3d

# ウインドウ生成
display = pi3d.Display.create(w=640, h=480, frames_per_second=60)

# シェーダーを生成。uv_flatは照明関係の計算をしない。
shader = pi3d.Shader("uv_flat")

# カメラを透視投影に
camera = pi3d.Camera(is_3d=True)

# テクスチャを読み込み
tex = pi3d.Texture("cutegirl.png", blend=False, filter=pi3d.GL_NEAREST)
# tex = pi3d.Texture("cutegirl2.png", blend=False, filter=pi3d.GL_NEAREST)

# スプライトを生成
sprite0 = pi3d.ImageSprite(tex, shader,
                           w=10.0, h=10.0, x=0.0, y=0.0)
sprite1 = pi3d.ImageSprite(tex, shader,
                           w=10.0, h=10.0, x=5.0, y=5.0)

print("sprite0.z() = %f" % sprite0.z())  # z=20.0
print("sprite1.z() = %f" % sprite1.z())

# キーボード取得用クラスを生成
keys = pi3d.Keyboard()

# メインループ
while display.loop_running():

    # スプライトを描画
    sprite0.draw()
    sprite1.draw()

    if keys.read() == 27:
        # ESCキーが押されたらループを抜けて終了
        keys.close()
        display.destroy()
        break

pi3d.Camera(is_3d=True) を指定してるので、平行投影ではなく、透視投影になってる。それと同時に、ImageSprite() 生成時の、幅、高さ、座標値に対して、謎単位な数値を指定している。

また、透視投影の場合、 ImageSprite() 生成時に、z=20.0とか z=30.0 とか指定してやると、描画される大きさが違ってくる。

以下の描画結果は、2つ目のスプライトのz値を、1つ目より大きくした＝遠くにしてみた事例。透視投影は、近くにあるものは大きく、遠くにあるものは小さく描画するので、遠くにあるスプライトのほうが小さく描画されてる。

アルファチャンネルを持った画像を描画した場合、境界部分がちょっと妙な描画になることに気づいた。


お判りいただけるだろうか。

どうやら pi3d は、テクスチャ画像のアルファチャンネルが 0 or 255 の時は問題ないけど、1〜254の時は妙な描画になるっぽいなと…。これはもしかすると、pi3d の問題ではなくて、Open GL ES の問題なのかもしれない。あるいは、使おうとしてるシェーダーの問題だろうか。

_cutegirl.png は境界部分のアルファチャンネルが0〜255になってるけど、 _cutegirl2.png は 0 or 255 の二値にしてあるので、読み込む画像を変えてみると違いが分かるかも。平行投影の場合は _cutegirl2.png を使うと変な境界が出ないけど、透視投影の場合はどちらを使っても変な境界が出ちゃう。みたいな。このあたり、解決策はあるのだろうか…。