33Step 2 - Textures and Sprites
44-----------------------------
55
6- Our next step in this tutorial is to draw something on the Screen. In order to
7- do that we need to cover two topics, Textures and Sprites.
6+ Our next step in this tutorial is to draw something on the Screen.
87
9- At the end of this chapter, we'll have something that looks like this. It's largely the
10- same as last chapter, but now we are drawing a character onto the screen:
8+ To see what we will accomplish, run this code:
9+
10+ .. code-block ::
11+
12+ python -m arcade.examples.platform_tutorial.02_draw_sprites
13+
14+
15+
1116
1217.. image :: images/title_02.png
1318 :width: 70%
1419
20+ Images in 2D games are created using Textures and Sprites. Let's discuss those ideas.
21+
1522Textures
1623~~~~~~~~
1724
1825Textures are largely just an object to contain image data. Whenever you load an image
19- file in Arcade, for example a ``.png `` or ``.jpeg `` file. It becomes a Texture.
26+ file in Arcade, for example a ``.png `` or ``.jpeg `` file, it becomes a Texture.
2027
2128To do this, internally Arcade uses Pyglet to load the image data, and the texture is
2229responsible for keeping track of this image data.
2330
2431We can create a texture with a simple command, this can be done inside of our ``__init__ ``
25- function. Go ahead and create a texture that we will use to draw a player.
32+ function. Go ahead and create a texture that we will use to draw a player by adding this code
33+ into the __init__ function of the GameView class. Right below the "super()..." statement is fine.
2634
2735.. code-block ::
2836
2937 self.player_texture = arcade.load_texture(":resources:images/animated_characters/female_adventurer/femaleAdventurer_idle.png")
3038
39+
40+ the 'self.' part the of statement officially attaches the stuff that comes behind it to become part
41+ of the class it is attached to. In this case, ANY function inside GameView now has access to a
42+ variable self.player_texture. That is how we 'share' the class data with the class methods (functions).
43+ arcade.load_texture() does all the dirty work of accepting a path to a image file and making it
44+ useful for the program.
45+
3146.. note ::
3247
3348 You might be wondering where this image file is coming from? And what is ``:resources: `` about?
@@ -46,12 +61,15 @@ function. Go ahead and create a texture that we will use to draw a player.
4661Sprites
4762~~~~~~~
4863
49- If Textures are an instance of a particular image, then :class: `arcade.Sprite ` is an instance of that image
50- on the screen. Say we have a ground or wall texture. We only have one instance of the texture, but we can create
51- multiple instances of Sprite, because we want to have many walls. These will use the same texture, but draw it
52- in different positions, or even with different scaling, rotation, or colors/post-processing effects.
64+ While the texture data is now 'saved' into the class as a variable. We can't use it as is, we need to convert it
65+ to a Sprite. If Textures are an instance of a particular image from a file, then :class: `arcade.Sprite ` is an
66+ instance of that image that can be put on the screen later on. Say we have a ground or wall texture. We only have
67+ one instance of the texture, but we can create multiple instances of Sprite, because we want to have many walls.
68+ These will use the same texture, but draw it in different positions, or even with different scaling, rotation,
69+ or colors/post-processing effects.
5370
54- Creating a Sprite is simple, we can make one for our player in our ``__init__ `` function, and then set it's position.
71+ Creating a Sprite is simple, we can make one for our player in our ``__init__ `` function. Make sure it is
72+ right after the previous statement. See the challenge section for why this is important!
5573
5674.. code-block ::
5775
@@ -61,16 +79,54 @@ Creating a Sprite is simple, we can make one for our player in our ``__init__``
6179
6280note ::
6381
64- You can also skip ``arcade.load_texture `` from the previous step and pass the image file to ``arcade.Sprite `` in place of the Texture object.
82+ You can also skip ``arcade.load_texture `` from the previous step and pass the image file to ``arcade.Sprite `` in place of the Texture object.
6583 A Texture will automatically be created for you. However, it may desirable in larger projects to manage your textures directly.
6684
67- Now we can draw the sprite by adding this to our ``on_draw `` function:
85+
86+ Rendering
87+ ~~~~~~~~~
88+
89+ If you ran your program as is, you will notice.... nothing new! We have simply given the class a
90+ texture and defined a sprite. But no instructions on what to do with that data. Remember, classes are objects
91+ that HAVE data (our image in sprite-form now) and DO stuff with the data.
92+
93+ Rendering is how we get our cool Sprite onto our window by adding the next command to our ``on_draw `` function. Place it under the
94+ "# Code to draw other things will go here" comment.
6895
6996.. code-block ::
7097
98+ # Code to draw other things will go here
7199 arcade.draw_sprite(self.player_sprite)
72100
73-
101+
102+
103+ .. code-block ::
104+
105+ python main.py
106+
107+
108+ ~~~~~~~~~
109+
110+ * Play with the center_x and center_y variables - what do they do?
111+ * Move the load.texture statement after the arcade.Sprite(self.player_texture) statement and run it.
112+ It fails. Why? Well, its because computers do things in order. If you try to use a variable before
113+ defining it, you will get an error. Computers don't try to guess what you want or bother looking
114+ around for the item. If it is not there, it instantly gives up.
115+ * See if you can find the location of the resources and use a different image file.
116+ * use a loop to create several copies of the image to the window - each with different locations. Hint:
117+ add the 'import random' module (another toolbox for Python) right under the import arcade statement.
118+ With the random module you can use random.randint(X, Y) which will give a random number between
119+ X and Y (including possibly X and Y).
120+ * EXTREME challenge - make your own image file - even a stick figure! And use that instead. paint.net
121+ is a good free option. aseprite.org is a low cost option and esotericsoftware.com has Spine for a
122+ more expensive option. MANY others exist. Don't spend too much time on this though :) Just enough to
123+ get your creative juices flowing! Maybe just use a picture of your face!
124+ * Explore the documentation for the :class: `arcade.Texture ` class
125+ * Explore the documentation for the :class: `arcade.Sprite ` class
126+
127+ Once you are finished with any or all challenges - make sure your code matches this so that future
128+ tutorial steps still work! Feel free to comment out sections of custom code you want to keep playing
129+ with later.
74130
75131Source Code
76132~~~~~~~~~~~
@@ -79,24 +135,3 @@ Source Code
79135 :caption: 02_draw_sprites - Draw and Position Sprites
80136 :linenos:
81137 :emphasize-lines: 24-30, 44-45
82-
83- Running this code should result in a character being drawn on the screen, like in
84- the image at the start of the chapter.
85-
86- * Documentation for the :class: `arcade.Texture ` class
87- * Documentation for the :class: `arcade.Sprite ` class
88-
89- .. note ::
90-
91- Once you have the code up and working, try adjusting the code for the following:
92-
93- * Adjust the code and try putting the sprite in new positions(Try setting the positions using other attributes of Sprite)
94- * Use different images for the texture (see :ref: `resources ` for the built-in images, or try using your own images.)
95- * Practice placing more sprites in different ways(like placing many with a loop)
96-
97- Run This Chapter
98- ~~~~~~~~~~~~~~~~
99-
100- .. code-block ::
101-
102- python -m arcade.examples.platform_tutorial.02_draw_sprites
0 commit comments