ผลต่างระหว่างรุ่นของ "Prg2/arcade6 dotrun"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
(Prg2/arcade5 dotrun ถูกเปลี่ยนชื่อเป็น Prg2/arcade6 dotrun)
 
(ไม่แสดง 11 รุ่นระหว่างกลางโดยผู้ใช้คนเดียวกัน)
แถว 6: แถว 6:
  
 
== Steps ==
 
== Steps ==
 +
These are the steps we will take to implement the game.
 +
 
* Shows Dot
 
* Shows Dot
 
* Dot moves to the right
 
* Dot moves to the right
แถว 22: แถว 24:
  
 
=== Player's states for jumping off and onto a platform ===
 
=== Player's states for jumping off and onto a platform ===
 +
 +
== Let's get started ==
 +
=== Create a new project and set up a Git repository ===
 +
 +
Create a directory to keep the project.  Create a git repository there.
 +
 +
We will start with a very simple dot moving game.
 +
 +
{{synfile|dotrun.py}}
 +
<syntaxhighlight lang="python">
 +
import arcade
 +
from models import World
 +
 +
SCREEN_WIDTH = 600
 +
SCREEN_HEIGHT = 400
 +
 +
class ModelSprite(arcade.Sprite):
 +
    def __init__(self, *args, **kwargs):
 +
        self.model = kwargs.pop('model', None)
 +
 +
        super().__init__(*args, **kwargs)
 +
 +
    def sync_with_model(self):
 +
        if self.model:
 +
            self.set_position(self.model.x, self.model.y)
 +
 +
    def draw(self):
 +
        self.sync_with_model()
 +
        super().draw()
 +
       
 +
 +
class DotRunWindow(arcade.Window):
 +
    def __init__(self, width, height):
 +
        super().__init__(width, height)
 +
 +
        arcade.set_background_color(arcade.color.GRAY)
 +
 +
        self.world = World(SCREEN_WIDTH, SCREEN_HEIGHT)
 +
       
 +
        self.dot_sprite = ModelSprite('images/dot.png',
 +
                                      model=self.world.dot)
 +
 +
    def update(self, delta):
 +
        self.world.update(delta)
 +
 +
 +
    def on_draw(self):
 +
        arcade.start_render()
 +
        self.dot_sprite.draw()
 +
 +
if __name__ == '__main__':
 +
    window = DotRunWindow(SCREEN_WIDTH, SCREEN_HEIGHT)
 +
    arcade.run()
 +
</syntaxhighlight>
 +
 +
{{synfile|models.py}}
 +
<syntaxhighlight lang="python">
 +
GRAVITY = -1
 +
MAX_VX = 10
 +
ACCX = 1
 +
 +
class Model:
 +
    def __init__(self, world, x, y, angle):
 +
        self.world = world
 +
        self.x = x
 +
        self.y = y
 +
        self.angle = 0
 +
 +
       
 +
class Dot(Model):
 +
    def __init__(self, world, x, y):
 +
        super().__init__(world, x, y, 0)
 +
        self.vx = 0
 +
        self.vy = 0
 +
   
 +
    def update(self, delta):
 +
        if self.vx < MAX_VX:
 +
            self.vx += ACCX
 +
 +
        self.x += self.vx
 +
 +
       
 +
class World:
 +
    def __init__(self, width, height):
 +
        self.width = width
 +
        self.height = height
 +
 +
        self.dot = Dot(self, 0, 100)
 +
 +
 +
    def update(self, delta):
 +
        self.dot.update(delta)
 +
</syntaxhighlight>
 +
 +
You can use the dot image file here: [https://gitlab.com/jittat/arcade-dotrun/raw/f2e95a083c35aba5c81004e4052814b1426e7074/images/dot.png?inline=false dot.png].  Save it to <tt>images/dot.png</tt>.
 +
 +
Try to run the game to see if there is a dot moving.
 +
Then, commit the code.
 +
 +
{{gitcomment|Don't forget to commit your code.}}
 +
 +
=== Jumping dot ===
 +
 +
We will make the dot jumps, basically by having attributes <tt>vy</tt> and <tt>is_jump</tt>.  The dot will also keep <tt>base_y</tt>.
 +
 +
{{synfile|models.py}}
 +
<syntaxhighlight lang="python">
 +
class Dot(Model):
 +
    def __init__(self, world, x, y, base_y):
 +
        super().__init__(world, x, y, 0)
 +
        self.vx = 0
 +
        self.vy = 0
 +
        self.is_jump = False
 +
 +
        self.base_y = base_y
 +
</syntaxhighlight>
 +
 +
When the dot lands, it will stop falling when its y co-ordinate is at most base_y.
 +
 +
When create a dot, make sure to put 100 to base_y.
 +
 +
{{synfile|dotrun.py}}
 +
<syntaxhighlight lang="python">
 +
class World:
 +
    def __init__(self, width, height):
 +
        self.width = width
 +
        self.height = height
 +
 +
        self.dot = Dot(self, 0, 100, 100)
 +
</syntaxhighlight>
 +
 +
We will create method <tt>jump</tt> in dot.
 +
 +
{{synfile|models.py}}
 +
<syntaxhighlight lang="python">
 +
class Dot(Model):
 +
    # ...
 +
    def jump(self):
 +
        if not self.is_jump:
 +
            self.is_jump = True
 +
            self.vy = JUMP_VY
 +
</syntaxhighlight>
 +
 +
Don't forget to add constant <tt>JUMP_VY</tt> at the top of the code.  You can put 10 for it.
 +
 +
To take a key press and make the dot jump, add the following methods.
 +
 +
{{synfile|models.py}}
 +
<syntaxhighlight lang="python">
 +
import arcade.key      # add this line at the top of the code in models.py
 +
 +
class World:
 +
    # ...
 +
    def on_key_press(self, key, key_modifiers):
 +
        if key == arcade.key.SPACE:
 +
            self.dot.jump()
 +
</syntaxhighlight>
 +
 +
Call it from DotRunWindow.
 +
 +
{{synfile|dotrun.py}}
 +
<syntaxhighlight lang="python">
 +
class DotRunWindow(arcade.Window):
 +
    # ...
 +
 +
    def on_key_press(self, key, key_modifiers):
 +
        self.world.on_key_press(key, key_modifiers)
 +
</syntaxhighlight>
 +
 +
==== Exercise: jumping dot ====
 +
 +
We still need to move the dot according to its vy and make sure that after it's y co-ordinate reaches base_y, it stops the jump (i.e., set vy=0 and is_jump = False).
 +
 +
{{synfile|models.py}}
 +
<syntaxhighlight lang="python">
 +
class Dot(Model):
 +
    # ...
 +
    def update(self, delta):
 +
        if self.vx < MAX_VX:
 +
            self.vx += ACCX
 +
 +
        self.x += self.vx
 +
 +
        if self.is_jump:
 +
            #
 +
            # complete the code here
 +
            #
 +
</syntaxhighlight>
 +
 +
== Platforms ==
 +
 +
== Coins ==
 +
 +
== Additional steps ==

รุ่นแก้ไขปัจจุบันเมื่อ 15:54, 28 กุมภาพันธ์ 2562

This is part of the course Programming 2.

In this tutorial we will sketch rough steps and new techniques for building the Dot Run game.

Arcade-dot-run.png

Steps

These are the steps we will take to implement the game.

  • Shows Dot
  • Dot moves to the right
  • Dot moves and jump on the floor
  • Viewport
  • Shows platforms
  • Jumps on top of platforms
  • Recycles platforms
  • Shows and collects coins
  • Shows score

New techniques

Viewport

Drawing primitives

Player's states for jumping off and onto a platform

Let's get started

Create a new project and set up a Git repository

Create a directory to keep the project. Create a git repository there.

We will start with a very simple dot moving game.

File: dotrun.py
import arcade
from models import World

SCREEN_WIDTH = 600
SCREEN_HEIGHT = 400

class ModelSprite(arcade.Sprite):
    def __init__(self, *args, **kwargs):
        self.model = kwargs.pop('model', None)
 
        super().__init__(*args, **kwargs)
 
    def sync_with_model(self):
        if self.model:
            self.set_position(self.model.x, self.model.y)
 
    def draw(self):
        self.sync_with_model()
        super().draw()
        

class DotRunWindow(arcade.Window):
    def __init__(self, width, height):
        super().__init__(width, height)
 
        arcade.set_background_color(arcade.color.GRAY)

        self.world = World(SCREEN_WIDTH, SCREEN_HEIGHT)
        
        self.dot_sprite = ModelSprite('images/dot.png',
                                      model=self.world.dot)
 
    def update(self, delta):
        self.world.update(delta)


    def on_draw(self):
        arcade.start_render()
        self.dot_sprite.draw()
 
if __name__ == '__main__':
    window = DotRunWindow(SCREEN_WIDTH, SCREEN_HEIGHT)
    arcade.run()
File: models.py
GRAVITY = -1
MAX_VX = 10
ACCX = 1

class Model:
    def __init__(self, world, x, y, angle):
        self.world = world
        self.x = x
        self.y = y
        self.angle = 0

        
class Dot(Model):
    def __init__(self, world, x, y):
        super().__init__(world, x, y, 0)
        self.vx = 0
        self.vy = 0
    
    def update(self, delta):
        if self.vx < MAX_VX:
            self.vx += ACCX

        self.x += self.vx

        
class World:
    def __init__(self, width, height):
        self.width = width
        self.height = height

        self.dot = Dot(self, 0, 100)


    def update(self, delta):
        self.dot.update(delta)

You can use the dot image file here: dot.png. Save it to images/dot.png.

Try to run the game to see if there is a dot moving. Then, commit the code.

Gitmark.png Don't forget to commit your code.

Jumping dot

We will make the dot jumps, basically by having attributes vy and is_jump. The dot will also keep base_y.

File: models.py
class Dot(Model):
    def __init__(self, world, x, y, base_y):
        super().__init__(world, x, y, 0)
        self.vx = 0
        self.vy = 0
        self.is_jump = False

        self.base_y = base_y

When the dot lands, it will stop falling when its y co-ordinate is at most base_y.

When create a dot, make sure to put 100 to base_y.

File: dotrun.py
class World:
    def __init__(self, width, height):
        self.width = width
        self.height = height

        self.dot = Dot(self, 0, 100, 100)

We will create method jump in dot.

File: models.py
class Dot(Model):
    # ...
    def jump(self):
        if not self.is_jump:
            self.is_jump = True
            self.vy = JUMP_VY

Don't forget to add constant JUMP_VY at the top of the code. You can put 10 for it.

To take a key press and make the dot jump, add the following methods.

File: models.py
import arcade.key      # add this line at the top of the code in models.py

class World:
    # ...
    def on_key_press(self, key, key_modifiers):
        if key == arcade.key.SPACE:
            self.dot.jump()

Call it from DotRunWindow.

File: dotrun.py
class DotRunWindow(arcade.Window):
    # ...

    def on_key_press(self, key, key_modifiers):
        self.world.on_key_press(key, key_modifiers)

Exercise: jumping dot

We still need to move the dot according to its vy and make sure that after it's y co-ordinate reaches base_y, it stops the jump (i.e., set vy=0 and is_jump = False).

File: models.py
class Dot(Model):
    # ...
    def update(self, delta):
        if self.vx < MAX_VX:
            self.vx += ACCX

        self.x += self.vx

        if self.is_jump:
            # 
            # complete the code here
            #

Platforms

Coins

Additional steps