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

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
แถว 126: แถว 126:
 
{{gitcomment|Commit your work.}}
 
{{gitcomment|Commit your work.}}
  
=== Review of physics ===
+
=== Movement ===
You might forget all these, but if you want objects in your game to look and act a bit like real objects, you might have to recall stuffs you learned from mechanics.
 
 
 
Let's look at the basics.  An object has a position, its position changes if it has non-zero velocity.
 
 
 
How can you change the player's position?  We can set its <tt>x</tt> and <tt>y</tt> attribute on the model.
 
 
 
If you want to apply the velocity, you can change the player position based on the velocity.
 
 
 
If there is an acceleration, the object's velocity also changes.  The <tt>Player</tt> currently does not have <tt>velocity</tt> as its attribute, so we will add it.  Now, you can update the velocity based on the acceleration.
 
 
 
These attributes (the position, the velocity, and the acceleration) all have directions.  Sometimes, you see negative velocity; this means the object is moving in an opposite direction as the positive direction.  We shall follow the standard co-ordinate system for ''arcade'', i.e., for the y-axis, we think of the direction as going upwards.
 
 
 
While in Physics, everything is continuous, but when writing games, we don't really need exact physics, so we can move objects in discrete steps.  (In fact, method <tt>update</tt> is also called with parameter <tt>delta</tt>, the time period between this call and the last call, and you can use this to make your simulation more smooth.)
 
 
 
So the usual pseudo code for physics is as follows.
 
 
 
pos = pos + velocity;
 
velocity = velocity + acceleration
 
 
 
=== Falling dot ===
 
To simulate the player falls, we should maintain the player's current velocity, so that we can make it falls as close as the real object. 
 
 
 
Let's add this line that initialize property <tt>vy</tt> in <tt>Player</tt>'s initialization code:
 
 
 
{{synfile|models.py}}
 
<syntaxhighlight lang="python">
 
class Player:
 
    def __init__(self, world, x, y):
 
        # ... [old code hidden]
 
 
 
        self.vy = 15
 
</syntaxhighlight>
 
 
 
You may wonder why we put 15 here.  It is just pure guess at this point.  However, when you write games, you might want to try various possible values and pick the best one (i.e., the one that make the game fun).
 
 
 
The <tt>update</tt> method changes the player's position
 
 
 
{{synfile|models.py}}
 
<syntaxhighlight lang="python">
 
class Player:
 
    # ...
 
    def update(self, delta):
 
        self.y += self.vy
 
        self.vy -= 1
 
</syntaxhighlight>
 
 
 
Note that we update <tt>self.vy</tt> at the end of update.  The constant <tt>-1</tt> is the acceleration.  The parameter <tt>delta</tt> represents delta time; we do not use it for now.
 
 
 
Try to run the program.  You should see the player falling.
 
 
 
While our program works, don't just rush to commit right away.  Let's try to get rid of the magic numbers first, by defining them explicitly.
 
 
 
Add these contants at the beginning of <tt>Player</tt> in <tt>models.py</tt>.  These are '''class variables'''.
 
 
 
{{synfile|models.py}}
 
<syntaxhighlight lang="python">
 
class Player:
 
    GRAVITY = 1
 
    STARTING_VELOCITY = 15
 
 
 
    # ...
 
</syntaxhighlight>
 
 
 
Then replace <tt>15</tt> and <tt>1</tt> in the code with the appropriate constants as follows.  Note that we can refer to these variables as <tt>self.GRAVITY</tt> or <tt>Player.GRAVITY</tt>.
 
 
 
{{synfile|models.py}}
 
<syntaxhighlight lang="python">
 
class Player:
 
    # ...
 
    def __init__(self, world, x, y):
 
        # ...
 
 
 
        self.vy = Player.STARTING_VELOCITY
 
 
 
    def update(self, delta):
 
        # ...
 
        self.vy -= Player.GRAVITY
 
</syntaxhighlight>
 
 
 
{{gitcomment|When your program looks good, commit it}}
 
 
 
=== Jumping dot ===
 
 
 
Now, let's make the dot jumps.  Let's add method <tt>jump</tt> that set the velocity to some positive amount.  Let's create a constant <tt>JUMPING_VELOCITY</tt> to represent this magic number as well.
 
 
 
{{synfile|models.py}}
 
<syntaxhighlight lang="python">
 
class Player:
 
    # ...
 
    JUMPING_VELOCITY = 15
 
 
 
    # ...
 
 
 
    def jump(self):
 
        self.vy = Player.JUMPING_VELOCITY
 
</syntaxhighlight>
 
 
 
To jump, we have to call <tt>player.jump()</tt> in an appropriate time.  We will response to keyboard inputs.  We shall follow the style we did in the last tutorial.
 
 
 
First, add method <tt>on_key_press</tt> in <tt>FlappyDotWindow</tt> to forward the call to the world.
 
 
 
{{synfile|flappy.py}}
 
<syntaxhighlight lang="python">
 
class FlappyDotWindow(arcade.Window):
 
    # ...
 
 
 
    def on_key_press(self, key, key_modifiers):
 
        self.world.on_key_press(key, key_modifiers)
 
</syntaxhighlight>
 
 
 
Then, in <tt>World</tt> for any key pressed, call <tt>jump</tt>.
 
 
 
{{synfile|models.py}}
 
<syntaxhighlight lang="python">
 
class World:
 
    # ...
 
 
 
    def on_key_press(self, key, key_modifiers):
 
        self.player.jump()
 
</syntaxhighlight>
 
 
 
To test this increment, you will have to click on the game canvas, and then quickly hit on any key to get the dot jumping.  Try a few times to see how the dot moves.  You can adjust the jumping velocity to make the movement nice.
 
  
 
{{gitcomment|After a few trials to make sure your code works, please commit.}}
 
{{gitcomment|After a few trials to make sure your code works, please commit.}}

รุ่นแก้ไขเมื่อ 16:32, 28 กุมภาพันธ์ 2562

This is part of the course Programming 2, the material is originally from 01219245/cocos2d/Maze from 01219245.

Rough steps

We will follow these steps to implement a pacman-like game.

  • Shows and moves pacman
  • Shows maze
  • blah

Pacman

Create a new project and set up a Git repository

We will start with an empty game template. Put the following code in our main program maze.py.

File: maze.py
import arcade
 
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
 
class MazeWindow(arcade.Window):
    def __init__(self, width, height):
        super().__init__(width, height)
 
        arcade.set_background_color(arcade.color.WHITE)

    def on_draw(self):
        arcade.start_render()
        
 
def main():
    window = MazeWindow(SCREEN_WIDTH, SCREEN_HEIGHT)
    arcade.set_window(window)
    arcade.run()
 
if __name__ == '__main__':
    main()

Try to run the game to see if an empty white window appears. Then, create a git repository at the project directory and commit the code.

Gitmark.png Create your git repository and make the first commit.

Creating the player model and the sprite

In this step, we shall create a sprite for the player, and show it in the middle of the screen.

Use a graphic editor to create an image for our player. The image should be of size 40 pixels x 40 pixels. Save the image as images/dot.png and try to make it look cute.

We will continue our model/window code structure. So let's create a dot model (called Player) and World in models.py as in our previous projects. Note that currently the Player do nothing in update

File: models.py
class Pacman:
    def __init__(self, world, x, y):
        self.world = world
        self.x = x
        self.y = y

    def update(self, delta):
        pass

class World:
    def __init__(self, width, height):
        self.width = width
        self.height = height
 
        self.pacman = Pacman(self, width // 2, height // 2)
 
     def update(self, delta):
        self.pacman.update(delta)

We will import these classes into our main program.

File: maze.py
from models import World, Pacman

We will show the pacman. Download sprite images from https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/. Save pacman.png in directory images.

As in the previous projects, we then use ModelSprite to display the sprite. Add the class in maze.py.

File: maze.py
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()

Then update MazeWindow to include the world and create ModelSprite accordingly.

File: maze.py
class MazeWindow(arcade.Window):
    def __init__(self, width, height):
        super().__init__(width, height)
 
        arcade.set_background_color(arcade.color.WHITE)

        self.world = World(SCREEN_WIDTH, SCREEN_HEIGHT)
        self.pacman_sprite = ModelSprite('images/pacman.png',
                                         model=self.world.pacman)

    def update(self, delta):
        self.world.update(delta)
        
    def on_draw(self):
        arcade.start_render()

        self.pacman_sprite.draw()

Try to run the game. You should see your sprite in the middle of the screen.

Gitmark.png Commit your work.

Movement

Gitmark.png After a few trials to make sure your code works, please commit.
*********************************************************************************
********************************* CHECK POINT 4.1 *******************************
*********************************************************************************