【Python/Pyxel】ウマ娘が公開されないのならば、こちらで作ってしまえばいいのではという話 ～出走登録編～

前回の記事(出産編)はこちらから

#アニメのウマ娘を今一度観ました
ウマ娘もどきを作るのに、こちらの記憶が曖昧では話になりません。もう一度アニメを観なおしました。BD持ってるので。
友人に布教し横で反応をニヤニヤ見る予定だったのですが、視聴3周目の僕が5回くらい泣いてしまいました。

良いアニメです。皆さんもぜひ。

#Visual Studio CodeでPythonを使うために

本題です。前回の続きからです。

今回は、Visual Studio CodeでPythonの開発を行うためのセッティングをしていきます。

①Visual Studio Codeの公式サイトから、インストーラーをダウンロードします。

②ダウンロード時に指定したディレクトリにある「VSCodeUserSetup-x64-1.32.1.exe」を起動します。

③画面の指示に従って、Visual Studio Codeをインストールします。

④Visual Studio Codeを起動して、ctrl + Pを押すと画面上部に検索窓みたいのが出てきます。そこに、以下を入力してください。

ext install Python

⑤左端の一覧みたいなところから、「Python」を選んで「install」を選択してください。

⑥コマンドプロンプト上で以下を打ちます。

pip install pylint

これでいけるらしいです。

というのも筆者はすごい色んな設定をいじくってしまって**「もう何が何だか分からなくなってしまったけど、何か今使いやすいから良いか！」**みたいな状態なので…。

だいぶ簡単にできるみたいなんで、皆さんは上記の方法をお試ししてみてください。

#やっと本題

では、サンプルコードに自分なりの解説を付けたものを見てみましょう。
ちなみにコメントアウトは先頭に「#」を付ければOKです。

なお、このコードの下に追加説明が必要と思われる箇所について記述しますが、
分かりづらい場合はこちらをご覧ください。

作者様による使い方のまとめです。作者様が日本人なので、分かりやすいです。

この記事内では、自分が躓いてしまった点を中心に解説します。

#pyxelを使うために必要
import pyxel


class App:
    def __init__(self):
        #表示する画面の幅・高さを指定し、上部に表示されるタイトルを指定
        pyxel.init(160, 120, caption="Hello Pyxel")
        
        #画像を読み込む
        #この場合、assetsフォルダにある「pyxel_logo_38x16.png」を座標位置(0,0)に読み込む
        #(「pyxel_logo_38x16.png」は最初からassetsフォルダに格納されてます)
        pyxel.image(0).load(0, 0, "assets/pyxel_logo_38x16.png")

        #後述のupdate(self)とupdate(draw)を延々と実行し続ける
        pyxel.run(self.update, self.draw)

    def update(self):
        #キーボードの「Q」が押されたら、処理を止める
        if pyxel.btnp(pyxel.KEY_Q):
            pyxel.quit()

    def draw(self):
        #画面の背景色を指定
        pyxel.cls(0)

        #「Hello,Pyxel!」という文字列を表示させます。
        #座標位置を指定後、表示させたい文字列(Hello,Pyxel!)を指定。
        #その後は色を指定します。(文章で説明を補完)
        pyxel.text(55, 41, "Hello, Pyxel!", pyxel.frame_count % 16)
        
        #__init__(self)内で読み込んだ画像を表示させます。(文章で説明を補完)
        pyxel.blt(61, 66, 0, 0, 0, 38, 16)


App()

###色について
Pyxelでは、使用できる色は16色のみです。
サンプルの「05_color_palette.py」を起動すると、使用できる色とそれに該当する番号が分かります。

上記コード内の

        #画面の背景色を指定
        pyxel.cls(0)

では、0番の色を背景色として指定しています。(ちなみに0番は黒)

###座標の考え方

Pyxelでは、画像の左上が原点となり、右方向がx軸の正、下方向がy軸の正となります。

数学で使用する座標とは、y軸の考え方が逆になります。

###文字をきらびやかにする工夫
前回の記事では、画像のみで「こんな画面です」という解説をしてしまいましたが、実際は以下のような画面が表示されるはずです。

この「Hello,Pyxel!」の文字、何故こんなに輝いているのでしょう？

        #その後は色を指定します。(文章で説明を補完)
        pyxel.text(55, 41, "Hello, Pyxel!", pyxel.frame_count % 16)

先ほど紹介した作者様サイトのほうにも書いてありますが、textは文字を表示させる機能です。

text(x,y,"文字列",color(0~15))

こう書くことで

・表示場所：右方向にx、下方向にy
・表示するもの：""で囲まれた文字列(サンプルコードだと「Hello,Pyxel!」)
・表示色：color(0~15)で指定された色

という命令になります。

では、サンプルコードでの表示色指定を見てみましょう。

pyxel.frame_count % 16

frame_countとは、起動してからのフレーム数(秒数のもっと細かいやつです)を表します。
そして「a % b」は、aをbで割った余りを計算結果とします。

すなわち、
〇1フレーム後
　1 ÷ 16 = 0 余り 1
　したがって、pyxel.frame_count % 16 = 1

〇2フレーム後
　2 ÷ 16 = 0 余り 2
したがって、pyxel.frame_count % 16 = 2

…
…
…

〇15フレーム後
　15 ÷ 16 = 0 余り 15
したがって、pyxel.frame_count % 16 = 15

〇16フレーム後
　16 ÷ 16 = 1 余り 0
したがって、pyxel.frame_count % 16 = 0

〇17フレーム後
　17 ÷ 16 = 1 余り 1
したがって、pyxel.frame_count % 16 = 1

といった具合に、16フレームで色が1周するようになっています。

フレーム毎に指定色が変わるため、実行結果にあるように色がキラキラして見えるというわけですね。

このように「文字色をキラキラさせる機能」がなくても工夫次第で、実現させることができます。

###画像の表示機能について

        #__init__(self)内で読み込んだ画像を表示させます。(文章で説明を補完)
        pyxel.blt(61, 66, 0, 0, 0, 38, 16)

ここですが、自分が少し躓いてしまったので、自分なりの言葉で解説します。

bltは読み込んだ画像を表示させる機能です。

読み込み画像には0~2の数字が割り振られています。
(恐らく、画像は3つまでしか読み込ませられないのだと思います。未検証ですが…)

blt(x, y, img(0~2), u, v, w, h, 色(0〜15))

こう書くことで、
・表示場所：右方向にx、下方向にy
・表示するもの：読み込ませた画像の (u, v) からサイズ (w, h) の領域
・表示色：color(0~15)で指定された色

文章で見ると分かりづらいかもしれないので、画像で説明します。

例えば、(u,V)=(19,8)、(w,h)=(19,8)に設定すると、
原点から(19,8)を起点とし、サイズ(19,8)の領域を表示します。

画像で言うと、紫(っぽい色)で塗りつぶされた領域が表示されます。

ちなみにこんな感じです。

#まだまだたくさんあります
これはサンプルですので、まだまだたくさんできることはあります。
なので、画像の表示機能で自分がやったような感じで、色んな数値をいじくってどんな結果になるか試してみてください。
実際触ってみると、理解度が全然違います。

次回は、このサンプルコードを基本にして、ある簡単なゲーム(の一部)を作ります。
ソシャゲ民にはお馴染みのあの機能を…。

それではまた次回！

次回記事はこちら