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/12 19:34]
valiant_curiosity [Tiled Sprite object]
gdevelop5:objects:tiled_sprite [2020/07/24 19:36] (current)
the_gem_tutorials [Change default size]
Line 7: Line 7:
 </​note>​ </​note>​
  
-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. ​+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 |}}
 +
 ==== 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, again from the Objects list on your right, ​ open the object'​s properties by right clicking on the object. Select "Edit object"​ from the popup list that appears.+Next, again from the Objects list on your right, ​ open the object'​s properties by right-clicking on the object. Select "Edit object"​ from the popup list that appears.
  
 {{ :​gdevelop5:​objects:​tiled-sprite-properties.png?​nolink }} {{ :​gdevelop5:​objects:​tiled-sprite-properties.png?​nolink }}
Line 26: Line 28:
  
 To add an image to the object, click the "​Select an image" field. A local file browser will open on your computer. Choose an image of your choice. To add an image to the object, click the "​Select an image" field. 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 will 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 }}
 +
 ==== Change default size ==== ==== Change default size ====
  
 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 effects how much of our image is going to be visible in the object. For example this is how my image looks with an 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 above image does not scale along with the object but makes the image only partially visible. 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 (as seen below), object size is bigger than the actual image so it continues drawing the image again 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 |}}
 +
 ==== Scale the object ==== ==== Scale the object ====
  
 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 be 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?​800|}} +{{ :​gdevelop5:​objects:​scaleasprite.png?​nolink ​|}}
  
 ## Examples ​ ## Examples ​
Line 57: Line 66:
 Open these examples online.</​note>​ Open these examples online.</​note>​
  
-[[https://​editor.gdevelop-app.com/?​project=example://​platformer|{{ :​gdevelop5:​behaviors:​platformerbehavior.png?​400 |}}]]+[[https://​editor.gdevelop-app.com/?​project=example://​platformer|{{ :​gdevelop5:​behaviors:​platformerbehavior.png?​nolink ​|}}]]
  
-* https://​editor.gdevelop-app.com/?​project=example://​platformer+[[https://​editor.gdevelop-app.com/?​project=example://​platformer| Platformer Example]]