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:sprite [2019/05/18 00:12]
piyushpalawat99
gdevelop5:objects:sprite [2019/07/03 04:28] (current)
piyushpalawat99 [Collision and points]
Line 7: Line 7:
 Sprite objects are the most often used objects in GDevelop. Sprite objects are the most often used objects in GDevelop.
  
-A sprite object allows us to display an image or to play a series of images as an animation. ​A sprite object ​can be used for many things in our games. Buttons, characters, and platforms ​are all considered objects. Anything that can be represented with an image can be a sprite object. +A sprite object allows us to display an image or to play a series of images as an animation. ​It can be used for many things in our games like buttons, characters ​or platforms. Anything that can be represented with an image can be a sprite object.
-==== How to create a sprite object====+
  
-In order to add a sprite ​to your scene, select the "click to add an object" option located on the right at the bottom of the Objects list.+## Creating ​a sprite object
  
-{{ :​gdevelop5:​objects:​clicktoaddanobject.png?200 |}}+In order to add a sprite to your scene, select the "Click to add an object"​ option located on the right at the bottom of the Objects list.
  
-A new panel will open that presents you with a list of options.+{{ :​gdevelop5:​objects:​clicktoaddanobject.png |}}
  
-{{ :​gdevelop5:​tutorials:​platform-game:​gd5_object_types1.png?400 |}}+A new panel will open that will show the different types of objects available in GDevelop. 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​gd5_object_types1.png |}}
  
 Choose "​Sprite"​ from the list to create a new sprite object in your game scene. Choose "​Sprite"​ from the list to create a new sprite object in your game scene.
-{{ :​gdevelop5:​objects:​select-sprite.png?​nolink&​400 |}} 
  
-Once we have our sprite created, right-click the sprite object on the Object list. Select "Edit object"​ from the popup menu. +{{ :​gdevelop5:​objects:​select-sprite.png?​nolink |}}
-This selection will open up the object properties window. The properties are different for each type of object. +
-If the object is a sprite, ​ we will see something like this +
-{{ :​gdevelop5:​objects:​sprite-object-properties.png?nolink&​400 ​|}} +
-==== Add animation ====+
  
-Next, we want to click the add animation button. +This selection will open up the object properties windowIn this window, you will see a few properties of the sprite object.
-{{ :​gdevelop5:​objects:​add-animation-button.png?​nolink&​400 |}}+
  
-Now we should see what a sprite object is all about. +{{ :​gdevelop5:​objects:​sprite-object-properties.png?​nolink |}}
-{{ :​gdevelop5:​objects:​animation-properties.png?​nolink&​400 ​|}} +
  
-On this screen, we add images to our object by clicking on the plus symbol. +## Adding an animation
-{{ :​gdevelop5:​objects:​add-symbol.png?​nolink&​200 |}}+
  
-Next, we need to browse our computer for an image and select one. Once done, the sprite ​image will be displayed in the window. +An animation allows you to add an image or series of images to the sprite ​objectTo add an animation, click the add animation button.
-{{ :​gdevelop5:​objects:​add-image.png?​nolink&​400 |}}+
  
-If we leave the image as is, our sprite object will display a single image when added to our scene. But we can also add additional images to create an animation! +{{ :​gdevelop5:​objects:​add-animation-button.png?nolink |}}
-{{ :​gdevelop5:​objects:​add-animation.png?​nolink&​400 ​|}}+
  
-==== Name the animation ====+This will expand ​the current dialog box and show you a wide variety of options you can tweak.
  
-We can also name the animation above so that we can refer to this animation using its name. +{{ :​gdevelop5:​objects:​animation-properties.png?nolink |}}
-{{ :​gdevelop5:​objects:​name-animation.png?nolink&​400 ​|}}+
  
-If we don't enter a name we need to use the animation ​number to refer to this animation. ​+### Adding an image to the animation
  
-==== Speed of the animation ​====+We can add images to the animation ​of our object by clicking on the plus symbol.
  
-We can also set the speed of the animation by changing the value by the clock icon. +{{ :​gdevelop5:​objects:​add-symbol.png?nolink |}}
-{{ :​gdevelop5:​objects:​set-animation-speed.png?nolink&​200 ​|}} +
-The value we enter here is basically the elapsed time between each frame. 1 is 1 second but we can enter smaller values too such as 0.5 for example for faster playback.+
  
-==== Repeat ​the animation ​====+This will open the file explorer so that you can browse through the files and choose a suitable image for your animation. After choosing the image, you will see the image being displayed in the window.
  
-By default every animation plays only once, meaning when the last frame of the animation is finished, it will stop. In some cases, it is preferred to repeat or "​loop"​ the animation. That is done by setting the animation to "​loop"​ by clicking the repeat icon. +{{ :​gdevelop5:​objects:​add-image.png?nolink |}}
-{{ :​gdevelop5:​objects:​set-animation-loop.png?nolink&​200 ​|}} +
-Once an animation is set to loop, it is going to play continuously.+
  
-==== Add multiple animations ====+### Collision and points
  
-We can also add multiple animations. To add animations, click the "add animation"​ button in the same way that we did it the first time. This feature allows us to easily separate the different animations. +You can customise the collision area of your sprite using the Edit Hitboxes at the bottom of the dialog. In this, you can set the area to be taken into consideration during a collision. You can [[gdevelop5:​objects:​sprite:​collision-mask|read more about collision masks here.]] 
-{{ :​gdevelop5:​objects:​multiple_animations.png?​nolink&​400 ​|}}+ 
 +Beside the Edit Hitboxes option, you will find the Edit Points option at the bottom of the sprite properties dialog. This option allows us to have additional reference points for an object. These reference points can be used in events when needed. [[gdevelop5:​objects:​sprite:​edit-points|Read more about points in sprites here.]] 
 + 
 +### Adding ​multiple ​animations 
 + 
 +An object might sometimes require to have more than one animations. To add animations, click the "Add animation"​ button in the same way that we did it the first time. This feature allows us to easily separate the different animations. 
 + 
 +{{ :​gdevelop5:​objects:​multiple_animations.png?​nolink |}}
  
 Later, we can switch between the animations using events. Later, we can switch between the animations using events.
  
-Finally, to save the sprite properties, click the "​Apply"​ button located on the bottom right corner of the panel.+### Naming ​the animation
  
-{{ :​gdevelop5:​objects:​createspriteapply.png?400 |}}+At the top of the animation section in the window, you will see a field beside "​Animation #" with grayed out "​Optional animation name" written in it. To enter a name for your animation, click on the field and enter the name. 
 + 
 +{{ :​gdevelop5:​objects:​name-animation.png?​nolink |}} 
 + 
 +<note tip>In objects with multiple animations, you may find it difficult to differentiate between animations without names. It is generally a good practice to use animation name for objects with multiple animations. 
 + 
 +If we don't enter a name we need to use the animation number to refer to this animation.</​note>​ 
 + 
 +###Adding multiple images in an animation 
 + 
 +To add multiple images to an animation, you can select all the images from the explorer and add them to the animation. 
 + 
 +{{ :​gdevelop5:​objects:​animation-multiple-images.png?​nolink |}} 
 + 
 +Images will be played in the same order as displayed. 
 + 
 +### Repeating the animation 
 + 
 +By default, every animation plays only once, which means that the animation stops as soon as its last frame finishes. To repeat the animation, we can "​loop"​ the animation. We can set the animation to "​loop"​ by clicking the repeat icon. 
 + 
 +{{ :​gdevelop5:​objects:​set-animation-loop.png?​nolink |}} 
 + 
 +Once an animation is set to loop, it is going to play continuously. 
 + 
 +### Setting animation time 
 + 
 +The speed of the animation can be set by changing the value by the clock icon. 
 + 
 +{{ :​gdevelop5:​objects:​set-animation-speed.png?​nolink&​200 |}} 
 + 
 +The value entered in the field is the time elapsed between two consecutive frames. The default value is 0.08 seconds. For faster playback use lower animation time while, for slower playback, use high animation time 
 + 
 +## Naming the object 
 + 
 +At the top of the dialog, you can see the name of the object in the "​Object Name" field. The name of the object usually describes the content of an object which makes it easy to distinguish from other sprites. 
 + 
 +{{ :​gdevelop5:​objects:​annotation_2019-06-09_152442.png?nolink ​|}} 
 + 
 +## Adding object to the scene
  
 To add the sprite object to our scene just select it and click in the scene to add an instance of the object to our scene. To add the sprite object to our scene just select it and click in the scene to add an instance of the object to our scene.
Line 76: Line 107:
 Your new sprite is now complete, but you still need to add it to your game scene. Click on the new sprite in the Object list. Next, click on the scene where you want to add the sprite. You will now see your sprite added to the scene. You can add multiple "​instances"​ of your sprite to your game screen. Simply repeat the process for adding the first sprite. ​ Your new sprite is now complete, but you still need to add it to your game scene. Click on the new sprite in the Object list. Next, click on the scene where you want to add the sprite. You will now see your sprite added to the scene. You can add multiple "​instances"​ of your sprite to your game screen. Simply repeat the process for adding the first sprite. ​
  
-{{ :​gdevelop5:​objects:​addspritetoscenecompressed.mp4 |}} +{{ :​gdevelop5:​objects:​addspritetoscene.gif |}}
-==== More information on multiple animations while using events ====+
  
-Using events to change animation can be done by creating ​multiple animations, as explained above, each with their own personal input images. Setting the clock between 0 - 1 will ensure it stays active when using events+## Using multiple animations with events
  
-**NOTE: Unlike other software<= -1 disables the event actions. // Do not use negative values.//** +After creating multiple animationseach with their own unique set of images, you can use events to switch between animations. Setting the animation time between 0 - 1 will ensure it stays active when using events
  
-When you have set multiple animations for an object, you can use the events tab to '**set animation by name**'​. This is controlled in the //add action// section of the condition. It will allow whatever condition you use in the //add condition// section, to switch to the correct ​animation ​when the event occurs+<​note>​Using a negative ​animation ​time disables ​the event actions.
  
-{{:​gdevelop5:​objects:​eventanimationexample.png?800|}}+//Do not use negative values.//</​note> ​
  
-NOTE:  As a habitmake sure to__ add a name to your animation__ using the name section in the object'​s properties:+When you have set multiple animations for an objectyou can use the events tab to "​Change ​the animation (by name)". This is controlled in the "Add action" ​section ​of the condition. It will allow you to switch to the correct animation whenever the condition used in the "Add condition"​ section is true. 
  
-{{:​gdevelop5:​objects:​animationnaming.png?400|}}+{{ :​gdevelop5:​objects:​eventanimationexample.png?nolink ​|}}
  
-Then put that name within the event action with ""​ around it: +As advised before, use animation names for multiple animations in an object to easily differentiate between them.
-{{:​gdevelop5:​objects:​eventanimnameexample.png?400|}}+
  
-For more event detailsfollow ​the [[http://​wiki.compilgames.net/​doku.php/​gdevelop5/​tutorials|tutorials]].+To add an action to change animation using animation namechoose ​the "​Change the animation (by name)" condition.
  
 +Then put that name within the "​Animation name" field surrounded by quotes.
 +
 +{{ :​gdevelop5:​objects:​eventanimnameexample.png?​nolink |}}
 +
 +For more event details, follow the [[http://​wiki.compilgames.net/​doku.php/​gdevelop5/​tutorials|tutorials here]].
  
 ## Examples ​ ## Examples ​
  
 <note tip>​**See it in action!** 🎮\\ <note tip>​**See it in action!** 🎮\\
-Open these examples online.</​note>​ +Click on the images to open the examples online.</​note>​
- +
-[[https://​editor.gdevelop-app.com/?​project=example://​change-scale-of-sprites|{{:​gdevelop5:​objects:​createasprite.png?​200|}}]]+
  
-https://​editor.gdevelop-app.com/?​project=example://​change-scale-of-sprites+[[https://​editor.gdevelop-app.com/?​project=example://​change-scale-of-sprites|{{:​gdevelop5:​objects:​createaspritenew.png?​|}}]]
  
-[[https://​editor.gdevelop-app.com/?​project=example://​change-sprite-animation|{{:​gdevelop5:​objects:​changespriteanimationexample.png?​200|}}]]+----
  
-https://​editor.gdevelop-app.com/?​project=example://​change-sprite-animation+[[https://​editor.gdevelop-app.com/?​project=example://​change-sprite-animation|{{:​gdevelop5:​objects:​changespriteanimationexamplenew.png?​|}}]]
  
-[[https://​editor.gdevelop-app.com/?​project=example://​change-sprite-color|{{:​gdevelop5:​objects:​changespritecolorexample.png?​200|}}]]+----
  
-https://​editor.gdevelop-app.com/?​project=example://​change-sprite-color+[[https://​editor.gdevelop-app.com/?​project=example://​change-sprite-color|{{:​gdevelop5:​objects:​changespritecolorexamplenew.png?​|}}]]
  
-[[https://​editor.gdevelop-app.com/?​project=example://​play-stop-sprite-animation|{{:​gdevelop5:​objects:​changespriteanimationexample2.png?​200|}}]]+----
  
-https://​editor.gdevelop-app.com/?​project=example://​play-stop-sprite-animation+[[https://​editor.gdevelop-app.com/?​project=example://​play-stop-sprite-animation|{{:​gdevelop5:​objects:​changespriteanimationexample2new.png?​|}}]]