Description
Checklist
- I added a descriptive title
- I searched for other issues and couldn't find a solution or duplication
- I already searched in Google and didn't find any good information or help
What happened?
When running applications that utilize pygame the traditional pygame paradigm of a continous while loop that processes the game state does not cause the browser canvas to update. This is not documented in the documentation. See the two code snippets below for what works and what does not work. Either the documentation should be updated to reflect the changes that will need to be made to code to have it work in the browser.
Example 1
This example does not work. The canvas does not update until the script finishes. This example is lifted from the pygame-ce homepage. This code does not run in pyscript as is.
import pygame
import time
# pygame setup
pygame.init()
screen = pygame.display.set_mode((600, 400))
clock = pygame.time.Clock()
running = True
dt = 0
count = 0
player_pos = pygame.Vector2(screen.get_width() / 2, screen.get_height() / 2)
while running:
# fill the screen with a color to wipe away anything from last frame
screen.fill("purple")
pygame.draw.circle(screen, "red", player_pos, 40)
keys = pygame.key.get_pressed()
if keys[pygame.K_w]:
player_pos.y -= 300 * dt
if keys[pygame.K_s]:
player_pos.y += 300 * dt
if keys[pygame.K_a]:
player_pos.x -= 300 * dt
if keys[pygame.K_d]:
player_pos.x += 300 * dt
# flip() the display to put your work on screen
pygame.display.flip()
# limit the game to running for 10 seconds
count += 1
if count > 600:
break
time.sleep(.01)
# dt = clock.tick(60) / 1000
print("Processed Frame")Example 2
This is a modified version of the code from above that was tweaked to use setInterval to trigger create the event loop. This code does successfully run in pyscript as intended.
import pygame
import time
import js
from pyscript.ffi import create_proxy
class GameState:
def __init__(self):
self.screen = pygame.display.set_mode((600, 400))
self.player_pos = pygame.Vector2(self.screen.get_width() / 2, self.screen.get_height() / 2)
self.count = 0
def __call__(self):
self.count += 1
if self.count > 600:
return
self.screen.fill("purple")
pygame.draw.circle(self.screen, "red", self.player_pos, 40)
keys = pygame.key.get_pressed()
if keys[pygame.K_w]:
self.player_pos.y -= 100
if keys[pygame.K_s]:
self.player_pos.y += 100
if keys[pygame.K_a]:
self.player_pos.x -= 100
if keys[pygame.K_d]:
self.player_pos.x += 100
# flip() the display to put your work on screen
pygame.display.flip()
print("Processed Frame")
# pygame setup
pygame.init()
game = GameState()
input("Waiting")
js.setInterval(create_proxy(game), 17)What browsers are you seeing the problem on? (if applicable)
Chrome
Console info
Additional Context
This could be a documentation issue, error on my end, or an actual bug. The exact problem is not clear to me.