Python Arcade

Arcadeは、Pythonを使って絵を描いたり、キャラクターを動かしたりして、 2Dゲームやアニメーションを作るためのライブラリです。Scratchで学んだ考え方をそのまま活かせるので、 Pythonを楽しく学び始めるのにぴったりです。

なを、以下の説明は、Arcade Academy - Learn Python を参照し、実際にコードを動かして試しながら書いています。

絵を描く方法

2Dの絵を描くプログラムは「5. How to Draw with Your Computer」に記載があります。また、描画のライブラリはAPI Reference の#Primitive"を参照して下さい。

(1) Arcadeが描画するウィンドウを開く

次のプログラムでは、幅640ピクセル、高さ480ピクセルのウィンドウが開きます。ウィンドウのタイトルは「描画サンプル」となっています。

import arcade
arcade.open_window(640, 480, "描画サンプル") # Width x Height
arcade.run()

(2) ウィンドウに色を付ける

バックグラウンドカラー（set_background_color）という命令を使います。この命令を有効にするには、描画開始せよという命令start_renderと、描画はここまでという命令finish_render が必要です。
set_background_color→start_render→finish_renderの順に並べます。 start_renderとfinish_renderが無いと、ウィンドウに色が付きませんでした。また、start_render→set_background_color→finish_renderの順では色が付きませんでした。

import arcade
arcade.open_window(600, 800, "描画サンプル")
arcade.set_background_color(arcade.csscolor.SKY_BLUE)
arcade.start_render()
arcade.finish_render()
arcade.run()

Arcadeのカラー定義はこちらのページ arcade.csscolor package を参照して下さい。

(3) 四角形を描いて塗り込む　その１

四角を描いて塗り込む命令
draw_lrbt_rectangle_filled を使います。この命令を描画開始( start_render )と描画終了( finish_render )の間に挟みます。 lrbtは、LEFT, RIGHT, BOTTOM, TOPの略で、LEFT, RIGHTはX軸の始点と終点を、BOTTOM, TOPはY軸の始点と終点を入力します。LEFT<RIGHT、BOTTOM<TOPでないとエラーになります。

import arcade
arcade.open_window(600, 800, "描画サンプル")
arcade.set_background_color(arcade.csscolor.SKY_BLUE)
arcade.start_render()
arcade.draw_lrbt_rectangle_filled(0, 640, 0, 240, arcade.csscolor.GREEN)
arcade.finish_render()
arcade.run()

以降のプログラムサンプルでは、start_renderと、finish_renderの中身だけを記載します。

(4) 四角形を描いて塗り込む　その２

四角形を、その真ん中の位置と、幅、高さを指定して書き、描いた四角を描いて塗り込むみます。この例では５つの四角形を書いています。XYWH(140, 120, 20, 60)は、四角形の真ん中が X軸140, Y軸120の位置に、幅20で高さ60の四角形を書いています。

arcade.draw_rect_filled(arcade.XYWH(140, 120, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_rect_filled(arcade.XYWH(240, 180, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_rect_filled(arcade.XYWH(340, 240, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_rect_filled(arcade.XYWH(440, 300, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_rect_filled(arcade.XYWH(540, 360, 20, 60), arcade.csscolor.SIENNA)

(5) 円を描く

右の図は６個の円を重ねて描いています。中心はどれも(320,240) です。半径を 100,80,60,40,20,2 と変えています。半径20の円だけDARK_GRAYで塗り込んでいます。

arcade.draw_circle_outline(320, 240, 100, arcade.csscolor.BLACK,2)
arcade.draw_circle_outline(320, 240, 80, arcade.csscolor.BLACK,2)
arcade.draw_circle_outline(320, 240, 60, arcade.csscolor.BLACK,2)
arcade.draw_circle_outline(320, 240, 40, arcade.csscolor.BLACK,2)
arcade.draw_circle_filled(320, 240, 20, arcade.csscolor.DARK_GRAY)
arcade.draw_circle_filled(320, 240, 2, arcade.csscolor.BLACK)

(6) 楕円を描く

楕円の描き方は長方形の描き方とほぼ同じです。中心位置（ここでは320,240)と、幅240, 高さ180 を指定します。

arcade.draw_rect_outline(arcade.XYWH(320, 240, 240, 180), arcade.csscolor.BLACK,2)
arcade.draw_ellipse_filled(320, 240, 240, 180, arcade.csscolor.LIGHT_YELLOW)

(7) 三角形を描く

三角形は３つの頂点の座標を指定することで描きます。３つの順番はどの順番でも構いません。次のプログラムは、右の絵の大きい三角形から順に描いています。一番大きい三角形の座標は、(320, 460), (156, 130), (483, 130)の３点です。

arcade.draw_triangle_filled (320, 460, 156, 130, 483, 130, arcade.csscolor.BLUE)
arcade.draw_triangle_outline(320, 420, 186, 150, 453, 150, arcade.csscolor.CHARTREUSE)
arcade.draw_triangle_outline(320, 380, 216, 170, 423, 170, arcade.csscolor.CORAL)
arcade.draw_triangle_outline(320, 340, 245, 190, 394, 190, arcade.csscolor.CORNSILK)
arcade.draw_triangle_outline(320, 300, 275, 210, 364, 210, arcade.csscolor.CYAN)

(8) 扇形を描く

扇形の描画は、まず楕円を指定して、その楕円を角度で切り出します。下の例では、(320,240) を中心に、幅240, 高さ360の楕円を描いた上で１つ目の青木型は0°から90°で切り出しています。同様に２つ目は90°から180°、３つ目は180°から270°、４つ目は270°から360°で切り出しています。

arcade.draw_arc_filled(320, 240, 240, 360, arcade.csscolor.RED, 0, 90)
arcade.draw_arc_filled(320, 240, 240, 360, arcade.csscolor.BLUE, 90, 180)
arcade.draw_arc_filled(320, 240, 240, 360, arcade.csscolor.YELLOW, 180, 270)
arcade.draw_arc_filled(320, 240, 240, 360, arcade.csscolor.ORANGE, 270, 360)

(9) 多角形を描く

多角形を描く時は、図形の角点をつなぐ順に座標を記載します。下の例では、５つの点を指定しています。最後の(214, 94)から、最初の(320, 420)へは自動的に線でつないでくれます。

arcade.draw_polygon_outline(
    ((320, 420), (426, 94 ), (149, 296), (491, 296), (214, 94)),
    arcade.csscolor.DARK_RED,2)

(10) 線を描く

下のプログラム例では４本の線を引いています。線は描画の順に、太さ２の黄色線、太さ３の青線、太さ４の赤、太さ５の白です。描線は起点（240,240）と終点(400,240) を指定します。

arcade.draw_line(240, 240, 400, 240, arcade.color.YELLOW, 2)
arcade.draw_line(320, 160, 320, 320, arcade.color.BLUE, 3)
arcade.draw_line(220, 140, 420, 340, arcade.color.RED, 4)
arcade.draw_line(420, 140, 220, 340, arcade.color.WHITE, 5)

(11) 文字を描く

文字を書きます。先頭文字の左下の位置を指定します。ここでは(120,230)と指定しています。最後の引数24は文字の大きさです。

arcade.draw_text("これは描画のサンプルです",120, 230,arcade.color.BLACK, 24)

例

この例は、テキストに掲載されているものです。

import arcade

arcade.open_window(600, 600, "描画サンプル")
arcade.set_background_color(arcade.csscolor.SKY_BLUE)
arcade.start_render()
arcade.draw_lrbt_rectangle_filled(0, 600, 0, 300, arcade.csscolor.GREEN)

arcade.draw_rect_filled(arcade.XYWH(100, 320, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_circle_filled(100, 350, 30, arcade.csscolor.DARK_GREEN)

# Another tree, with a trunk and ellipse for top
arcade.draw_rect_filled(arcade.XYWH(200, 320, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_ellipse_filled(200, 370, 60, 80, arcade.csscolor.DARK_GREEN)

# Another tree, with a trunk and arc for top
# Arc is centered at (300, 340) with a width of 60 and height of 100.
# The starting angle is 0, and ending angle is 180.
arcade.draw_rect_filled(arcade.XYWH(300, 320, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_arc_filled(300, 340, 60, 100, arcade.csscolor.DARK_GREEN, 0, 180)

# Another tree, with a trunk and triangle for top
# Triangle is made of these three points:
# (400, 400), (370, 320), (430, 320)
arcade.draw_rect_filled(arcade.XYWH(400, 320, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_triangle_filled(400, 400, 370, 320, 430, 320, arcade.csscolor.DARK_GREEN)

# Draw a tree using a polygon with a list of points
arcade.draw_rect_filled(arcade.XYWH(500, 320, 20, 60), arcade.csscolor.SIENNA)
arcade.draw_polygon_filled(((500, 400),
                            (480, 360),
                            (470, 320),
                            (530, 320),
                            (520, 360)
                            ),
                           arcade.csscolor.DARK_GREEN)

# Draw a sun
arcade.draw_circle_filled(500, 550, 40, arcade.color.YELLOW)

# Rays to the left, right, up, and down
arcade.draw_line(500, 550, 400, 550, arcade.color.YELLOW, 3)
arcade.draw_line(500, 550, 600, 550, arcade.color.YELLOW, 3)
arcade.draw_line(500, 550, 500, 450, arcade.color.YELLOW, 3)
arcade.draw_line(500, 550, 500, 650, arcade.color.YELLOW, 3)

# Diagonal rays
arcade.draw_line(500, 550, 550, 600, arcade.color.YELLOW, 3)
arcade.draw_line(500, 550, 550, 500, arcade.color.YELLOW, 3)
arcade.draw_line(500, 550, 450, 600, arcade.color.YELLOW, 3)
arcade.draw_line(500, 550, 450, 500, arcade.color.YELLOW, 3)

# Draw text at (150, 230) with a font size of 24 pts.
arcade.draw_text("Arbor Day - Plant a Tree!",
                 150, 230,
                 arcade.color.BLACK, 24)

arcade.finish_render()
arcade.run()