FIT2第03回:イベントループ、各種入力、デバッグ

前回授業の振り返り

FIT2第02回:繰り返しと場合分け

if文とfor文

練習問題b-5-1

https://gyazo.com/f8fd0984de4837435f40e4196a6aaa25

code:b-5-1.py

import pyxel

pyxel.init(200, 200) #画面を初期化

pyxel.cls(7) #白で塗りつぶす

for x in range(10, 200, 20): # x座標を10,30,50...190まで繰り返す

for y in range(10, 200, 20): # y座標を10,30,50...190まで繰り返す

# (10,10), (10,30), (10,50) .... (10,190) までいったらxが20繰り上がる

# (30,10), (30,30), (30,50) .... (190,190) で終了

if x + y <= 100: #xとyの和が100以下なら

pyxel.circ(x, y, 10, 2) #x,y座標を中心とした半径10の円を2(=紫)の色で塗る

elif x + y <= 200: #前の条件を満たさないが、 xとyの和が200以下なら

pyxel.circ(x, y, 10, 3) #3は緑

elif x + y <= 300:

pyxel.circ(x, y, 10, 6) #6は水色

else:

pyxel.circ(x, y, 10, 14) #14はピンク

pyxel.show()

pyxel.flip() が便利

for文の中にpyxel.flipを追加すると、flip()が呼び出されるたびに画面を描画してくれる

code:b-5-1-flip.py

import pyxel

pyxel.init(200, 200) #画面を初期化

pyxel.cls(7) #白で塗りつぶす

for x in range(10, 200, 20): # x座標を10,30,50...190まで繰り返す

for y in range(10, 200, 20): # y座標を10,30,50...190まで繰り返す

# (10,10), (10,30), (10,50) .... (10,190) までいったらxが20繰り上がる

# (30,10), (30,30), (30,50) .... (190,190) で終了

if x + y <= 100:

pyxel.circ(x, y, 10, 2) #x,y座標を中心とした半径10の円を2(=紫)の色で塗る

elif x + y <= 200:

pyxel.circ(x, y, 10, 3) #3は緑

elif x + y <= 300:

pyxel.circ(x, y, 10, 6) #6は水色

else:

pyxel.circ(x, y, 10, 14) #14はピンク

pyxel.flip()

pyxel.show()

b-2-3 リサージュ図形

振り子を前後左右同時に揺らした場合に得られる図形のこと(ざっくり)

https://gyazo.com/c3b7fdb84df4809a9052a310ddc0cc4c

code:b-2-3.py

import pyxel

import math

pyxel.init(200, 200)

pyxel.cls(7)

# リサージュ図形のパラメタ

a = 3

b = 2

# 描画半径と起点

r = 100

dx = 100

dy = 100

# 円周360度を1度ずつ描画していく

for i in range(360):

# 角度をラジアンに変換

t = 2 * math.pi * (i / 360)

# リサージュ図形の計算式

x = r * math.sin(a * t)

y = -r * math.sin(b * t)

# 円周360度を6分割して色を塗り分ける

color = int(i / (360 / 6))

pyxel.line(dx, dy, dx + x, dy + y, color)

pyxel.flip()

pyxel.show()

課題提出に関して

よくあるミス

動作確認してから提出しましょう！

pyxel がpyxcel になっていて動かなかったり

import mathを忘れていて三角関数が動かなかったり

なんで動かないの？となったら気軽に質問を。分からなくて当然です。

動作しない場合、途中点は付与しますが多少の減点になるのでご注意を

任意課題のb-2-3に関しても8名の履修者がトライしてくれました

うち半数は正解👏 👏

挑戦してくれた方も素晴らしい

ほとんど合っているが、前述の不具合だったり

ラジアンの計算方法で迷っていたりという感じかな

今日のゴール

イベントループという考え方を理解する

キーボード操作、マウス操作を検知するコードを書けるようになる

コードが動かないときに自己解決できるようになる (デバッグ)

講義

イベントループとは？

ゲーム開発の基本概念

画面上は同時に様々なことが起こす必要がある

でもプログラムは上から1行ずつしか実行できない

逐次描画を行うと、「同時に起こるべきこと」が「順番に起こる」ことになってしまう

要はカクカクのゲーム体験になってしまうということ

e.g. 格闘ゲーム

自キャラのコマンド処理→相手キャラのコマンド処理　が交互に繰り返されたら？

「引き分け」の概念がなくなってしまう

同時処理、できないですもんね

ギリギリの差でも必ず「どちらかが勝つ」ことに

解決策として、update, drawの2段階に分離することが多い

update = 各種計算処理

draw = 描画処理

「同時」として計算されるべき処理を全てupdateで一度終わらせてしまう

結果の画面描画だけ「draw」で一気に実行

参考概念：フレームレート

処理が超高速に終われば秒間60回 (= 60fps)で描画できる

処理が重かったり、PCの処理性能が低い場合は秒間処理回数を減らして対応 (=10fps)、カクカク

1秒で終わるべき処理に6秒かかったらスローモーションになってしまう

https://gyazo.com/9177d8e8b71a2f729114bfb7ff000049

atom-runnderを利用する際のデバッグ

print() 関数を利用しても、atom-runnerは仕様上「終了してから一気に表示する」という挙動になってしまいます

pyxel.text(0, 0, str(a), 0) のように、画面上に直接値を描画してしまうというのも手です

課題提出について

基本的には授業時間内に提出を完了すること

授業実施日の次の日曜日の23:59までを提出期限とします