Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:objects:tiled_sprite [2018/10/07 22:58]
valiant_curiosity [Add a tiled sprite object]
gdevelop5:objects:tiled_sprite [2021/11/22 23:06] (current)
Line 3: Line 3:
 # Tiled Sprite object # Tiled Sprite object
  
-A tiled sprite object allows us to display an image in a tile set. You can increase and decrease the size of the tile set by scaling the object in the scene. +<note tip>**See it in action!** 🎮\\ 
 +[[#Examples|I would rather see the Tiled Sprite object examples! Please take me there now.]] 
 +</note> 
 + 
 +A tiled sprite object allows us to display an image in a tileset. You can increase and decrease the size of the tileset by scaling the object in the scene. 
  
 A tiled sprite object can be used to create platforms in a platform game. It can also be used as a group of the same images. In this case, there is no need to deal with multiple sprite objects. A tiled sprite object can be used to create platforms in a platform game. It can also be used as a group of the same images. In this case, there is no need to deal with multiple sprite objects.
 +
 {{ :gdevelop5:objects:tiled-sprite-object.png?nolink&200 |}} {{ :gdevelop5:objects:tiled-sprite-object.png?nolink&200 |}}
  
-## Examples  
- 
-<note tip>**See it in action!** 🎮\\ 
-Open these examples online.</note> 
- 
-{{ :gdevelop5:behaviors:platformerbehavior.png?400 |}} 
- 
-* https://editor.gdevelop-app.com/?project=example://platformer 
 ==== Add a tiled sprite object ==== ==== Add a tiled sprite object ====
  
 To add a Tiled Sprite object to a Scene, create a new object from the Objects list. Select the "Tiled Sprite" option from the panel that opens. To add a Tiled Sprite object to a Scene, create a new object from the Objects list. Select the "Tiled Sprite" option from the panel that opens.
  
 +{{ :gdevelop5:objects:add-tiled-sprite-object.png?nolink |}}
  
-{{ :gdevelop5:objects:add-tiled-sprite-object.png?nolink }} 
 ==== Open object properties ==== ==== Open object properties ====
  
-Next you want to open object properties by right clicking on the object and select Edit object from the list. +Next, again from the Objects list on your right,  open the object'properties by right-clicking on the object. Select "Edit objectfrom the popup list that appears
-In the window come up you should see something like this+
 {{ :gdevelop5:objects:tiled-sprite-properties.png?nolink }} {{ :gdevelop5:objects:tiled-sprite-properties.png?nolink }}
  
 ==== Add an image ==== ==== Add an image ====
  
-To add an image to the object, just click the Select an image field and choose an image from your local computer.+To add an image to the object, click the "Select an imagefield. A local file browser will open on your computer. Choose an image of your choice. 
 {{ :gdevelop5:objects:add-image-to-tiled-sprite.png?nolink }} {{ :gdevelop5:objects:add-image-to-tiled-sprite.png?nolink }}
  
-The selected image is going to be displayed in the preview window on the right+The selected image will be displayed in the preview window on the right 
 {{ :gdevelop5:objects:tiled-sprite-image-preview.png?nolink }} {{ :gdevelop5:objects:tiled-sprite-image-preview.png?nolink }}
  
Line 39: Line 38:
  
 We can change the default size of the tiled sprite object by changing the Default width and Default height value on the bottom We can change the default size of the tiled sprite object by changing the Default width and Default height value on the bottom
-{{ :gdevelop5:objects:tiled-sprite-default-size.png?nolink&400 |}} 
  
-The default size effect how much of our image is going to be visible in the object. For example this is how my image looks like with object size 32x32+{{ :gdevelop5:objects:tiled-sprite-default-size.png?nolink|}} 
 + 
 +The default size effects how much of our image is going to be visible in the object. For examplethis is how my image looks with an object size 32x32
 {{ :gdevelop5:objects:tiled-sprite-3232.png?nolink&200 |}} {{ :gdevelop5:objects:tiled-sprite-3232.png?nolink&200 |}}
  
-As you can see the image does not scale along with the object but make the image partially visible only+As you can see the above image does not scale along with the object but makes the image only partially visible. 
-If I set the size of the object to 100x100 the tiled effect step in as the object size is bigger than the actual image and keep continue drawing the image to fill the empty space+ 
 +If I set the size of the object to 100x100 (as seen below), the object size is bigger than the actual image so it continues drawing the image again to fill the empty space
 {{ :gdevelop5:objects:tiled-sprite-100100.png?nolink&200 |}} {{ :gdevelop5:objects:tiled-sprite-100100.png?nolink&200 |}}
  
Line 51: Line 54:
  
 You can get instant results by scaling the object in the scene editor to create the look/size that you need. You can get instant results by scaling the object in the scene editor to create the look/size that you need.
 +
 {{ :gdevelop5:objects:scale-tiled-sprite.png?nolink&400 |}} {{ :gdevelop5:objects:scale-tiled-sprite.png?nolink&400 |}}
  
-The Scene (Events) editor can also used to change the size of a tiled sprite. Using the Events editor makes gameplay more fluid and interesting.+The Scene (Events) editor can also be used to change the size of a tiled sprite. Using the Events editor makes gameplay more fluid and interesting. 
 + 
 +{{ :gdevelop5:objects:scaleasprite.png?nolink |}} 
 + 
 +=====  Events for Tiled Sprite object ===== 
 + 
 +==== Conditions ==== 
 + 
 +{{ :gdevelop5:objects:tiledspriteconditions-1.jpg?nolink |}} 
 +{{ :gdevelop5:objects:tiledspriteconditions-2.jpg?nolink |}} 
 + 
 +==== Actions ==== 
 + 
 +{{ :gdevelop5:objects:tiledspriteactions-1.jpg?nolink |}} 
 +{{ :gdevelop5:objects:tiledspriteactions-2.jpg?nolink |}} 
 + 
 +## Examples  
 + 
 +<note tip>**See it in action!** 🎮\\ 
 +Open these examples online.</note>
  
 +[[https://editor.gdevelop-app.com/?project=example://platformer|{{ :gdevelop5:behaviors:platformerbehavior.png?nolink |}}]]
  
 +* [[https://editor.gdevelop-app.com/?project=example://platformer| Platformer Example]]