Sprite Sheet Extension 2.0

StarCoffey commented 5 years ago

Description

This extension will allow you to use Sprite Sheets on Tiled Sprite Objects. In the Behavior section You can define the X/Y scale of the sprites and what the spacing is between sprites. In the events you can define what row an animation is, the starting frame and ending frame of that row, what speed the animation will play at, and a way to identify the animation. The extension also has two expressions, one for identifying what animation is playing, and another that identifies what the current frame is.

2.0 Patch notes

-Fixed some typos -Cleaned up the code -Added Grouping -Added Grouping expression -Added Set Frame -Fixed bug where if the current frame was too high and it switched to to a shorter animation, it would not loop. -Fixed Current Frame calculation and looping

Checklist

[* ] Extension has a proper name and description.
[ *] Extension has tags (for example: "platform, brick, breakable").
[ *] All behaviors have a description.
[* ] All functions (actions, conditions, expressions) have descriptions.
[ *] I confirm that this extension can be intergrated to this GitHub repository, distributed and MIT licensed.

Extension file

Finally, attach the .json file of your extension `here.

SpriteSheetExtension 1.0.zip

SpriteSheetExtension 2.0.zip

mlafefon commented 5 years ago

didn't work for me :(

StarCoffey commented 5 years ago

didn't work for me :(

Hi Would you mind adding me on discord so we can talk more about the issue you are having? You can find me as StarCoffey#8693

Bouh commented 4 years ago

This extension may be useful while waiting for official support.

arthuro555 commented 3 years ago

This is looking good! This can be very useful, and seems to work well for me. I would just do the folowing:

[ ] Add an icon to the extension
[ ] Use a onPreEvent behavior runtime function instead of requiring to run the "Play animation" action every frame
[ ] Change the naming of the properties to sound more like names and less like questions

Else it would be good to go I think.

arthuro555 commented 3 years ago

It has been 2 weeks since I posted my review and I have seen no feedback from the original author, I will therefore take over the task of finishing that extension.

StarCoffey commented 3 years ago

It has been 2 weeks since I posted my review and I have seen no feedback from the original author, I will therefore take over the task of finishing that extension.

Hey, sorry about that. It's been a while since I've worked on this. I was planning on continuing it until Gdevelop was more developed to finish it but then life got in the way. If people still want this extension I can try and finish it. Maybe I can tackle this with a fresh mindset and probably make a better version than what's currently available.

arthuro555 commented 3 years ago

Whoops, I already began making the changes 😓. Well, if you are back, you can take over again. Here is what I have done so far: SpriteSheet.zip SpriteSheet test project.zip

Removed the Animation and Group ID, as that is not relevant to the extension, users can use a variable to identify the state of their objects
Added a private action to simplify the frame setting operation
Made the animation not require the action to keep on getting called by using the onPreEvents callback
Made the animation begin the instant the action is called, not when the timer first triggers
Used an object timer instead of a scene timer with the object name
Rewrote the extension description
Added an icon

The only thing in my review list I had not done is this:

Change the naming of the properties to sound more like names and less like questions

You can do that and any other modifications you might want to do before submitting a new version.

StarCoffey commented 3 years ago

Whoops, I already began making the changes 😓. Well, if you are back, you can take over again. Here is what I have done so far: SpriteSheet.zip SpriteSheet test project.zip

Removed the Animation and Group ID, as that is not relevant to the extension, users can use a variable to identify the state of their objects

Added a private action to simplify the frame setting operation

Made the animation not require the action to keep on getting called by using the onPreEvents callback

Made the animation begin the instant the action is called, not when the timer first triggers

Used an object timer instead of a scene timer with the object name

Rewrote the extension description

Added an icon

The only thing in my review list I had not done is this:

Change the naming of the properties to sound more like names and less like questions

You can do that and any other modifications you might want to do before submitting a new version.

Wow that was fast. You may as well finish it at this point, I already moved to the Construct engine anyways and I was able to achieve the same thing there using XML files which allows for more complex sprite sheets. Though, I would recommend adding back the animation and group IDs cause it's useful to define what animation is playing (ie Walking - up) and the reason I added those was due to there not being the 8-Direction mode for sprites (it made for better organization).

arthuro555 commented 3 years ago

Ok, I might have done a little more than what my review originally told 😅. I have added two other behavior: one for vertical sprite sheets (not very different from the other) and one that parses a pixi.js spritesheet and can display frames or animations from it. As pixi spritesheets are common, they can be generated easily using a tool like TexturePacker.

spritesheet test project.zip SpriteSheet.zip

At this point I have written such a huge part of the extension that I think this would need a review from someone else to be a fair one.

arthuro555 commented 3 years ago

I have made major changes to the extension so I would appreciate another review, but if none comes in a few days I'll add it to the repo.

tristanbob commented 3 years ago

I'm reviewing this now, it is really useful! I'll share my minor changes (so far, only wording) hopefully today.

tristanbob commented 3 years ago

Overall, this is a GREAT extension that a lot of people will use. My only immediate recommendation is to add the ability to enable or disable looping.

Version 1.0.1

Changed a lot of wording
Updated example project to make it easy to test various states and actions

To do

Allow users to specify if they want to loop or not (to match normal animation capabilities)

Wishlist

This needs to (eventually) become a builtin tool for sprites
Tiled sprites have less functionality (such as not able to use points, can't flip, etc)

Extension file

SpriteSheetExtension_1.0.1.json.zip

Play now

https://games.gdevelop-app.com/game-8311067b-1aac-4bd3-93be-6ec61b4aaae5/index.html

Project files

spritesheet.test.project_1.0.1.zip

Video

https://user-images.githubusercontent.com/8879811/126084433-a6567feb-19ea-4c3f-858c-0bb6213b07f3.mp4

4ian commented 3 years ago

Thanks everyone! I think it's great to have this and according to the popularity of the extension we can see how to port this later so that it's supported by default in Sprite objects (and also in other objects if we can port support for animations for multiple objects).

Bouh commented 3 years ago

I see expressions to get the current animation and the current frame, did you think to add conditions for that?

I think we're really close to merge this extension :+1:

arthuro555 commented 3 years ago

My idea was to already merge this and work on additional updates later.

Bouh commented 3 years ago

It's fair, let's go with this build and another version later for the conditions.

The description is cropped at the end of the list on point 6. Create actions to start and ...

Animate images from a sprite sheet by using a tiled sprite.

How to use

1) Create a tiled sprite object 2) Edit the tiled sprite
3) Add the sprite sheet image 4) Edit default width and height that match the size of each frame 5) Add the relavant behavior to the tiled sprite (horizontal/vertical/JSON animator) 6) Create actions to start and

Vertical and horizontal spritesheet animators

These behaviors will animate a spritesheet with the images distributed from left to right or from top to bottom. Offsets, row/column, animation speed and frame ranges can be specified to target the desired images.

JSON spritesheet displayer

This behavior allows displaying frames or animations from a more intelligent spritesheet. You can generate a compatible JSON and sprite sheet via TexturePacker using the pixi.js preset. The JSON is formatted like this:

{
  "frames": {
    "frame1": {
      "frame": {
        "x": 0,
        "y": 0,
        "h": 10,
        "w": 10,
      }
    },
    "frame1": {
      "frame": {
        "x": 10,
        "y": 0,
        "h": 10,
        "w": 10,
      }
    },
    "frame2": {
      "frame": {
        "x": 0,
        "y": 10,
        "h": 20,
        "w": 20,
      }
    }
  },
  "animations": {
    "animationName1": ["frame1", "frame2"],
    "animationName2": ["frame2", "frame3"]
  }
}

frames define each image inside the spritesheet and animations are the set of frames that form an animation. For compatibility with the TexturePacker pixi.js preset, the JSON doesn't contain the animation speed, so it has to be specified in the behavior properties.

arthuro555 commented 3 years ago

Updated the extension description and rolled back the version number to 1.0.0, as versioning is only relevant to releases of the extension, not changes in development:
Example
Extension

Bouh commented 3 years ago

Closed by 11fca41f59352f3bdb0e004fc6216e3b2d28ac5e

tristanbob commented 3 years ago

Updated the extension description and rolled back the version number to 1.0.0, as versioning is only relevant to releases of the extension, not changes in development:

I think it is very important for us to use versioning when bouncing code back and forth between multiple people. If you want to publish with 1.0.0, that is fine, but for prerelease development let's use 0.x.y versions.

Also... great job everyone! :)

KhanhhNe commented 2 years ago

Overall, this is a GREAT extension that a lot of people will use. My only immediate recommendation is to add the ability to enable or disable looping.

I have actually implemented the looping option for the plugin. Can anyone show me how to contribute my edit to the plugin?

Here is my plugin export file SpriteSheet.zip

GDevelopApp / GDevelop-extensions