Improved Platformer Example

Question

Improved Platformer Example

mxsdev opened this issue 2 years ago · 22 comments

mxsdev commented 2 years ago

Describe the example

Improved platformer example that aligns with the website design.

Note: all sounds used are adapted from CC0 sounds or made by me. Here's a list of used sounds:

Checklist

I've followed all of the best practices.
My game has a proper name in the game properties.
My game package name behind with com.example..
My game has all events unfolded.
I've added myself as the author in the game properties.
I've included a file called "README.md" with a description in proper English, explaining what this example is doing.
I confirm that this game and all of its resources can be integrated to this GitHub repository, distributed and MIT licensed.
I've cleaned unused resources.

Game folder

platformer_ver_1_0_0.zip

Answer 1 · 2022-02-15T10:54:06.000Z

Looking great! Great start. Careful I'll be having a lot of comments because this will be becoming the first and most opened game example soon, so it must be perfect ;)

Asset size:

A few things that I noted, which are basically all optimisations (because you can tell this was adapted from something made by designers, not game artists ;)):

The game resolution is quite large (1920x1080), this gives a lot of work for mobile (or even desktop) devices, I think we could go for something a bit smaller, like 960x540 (i.e: divide it by two).
Similarly, the assets are very large, which creates performance problem, big download size and the background can't be displayed on mobile because the GPUs can't handle an image this big.
- For example, platform4.png is 1500x1287, while it's "just" a platform. This gives tons of work for the GPU. Reduce this by 3 to 500x429. Same for almost all other assets, let's divide the size of almost all assets by 3.
  - The rule of thumb is that once you have chosen the size of the red character (his size is good), then all other assets should be proportional to it. You should not need to resize platforms or anything in the scene editor.
- 180 images for the fly is waaaay too much. We should reduce this to 10 at most (this will reduce the quality of the animation, but it's a game and we can't afford 180 images for a single enemy).
- Also try to crop as much assets as possible so that they are not having transparent margins around them (this costs memory).
- For backgrounds, reduce them (they are not displaying on mobile because larger than 2048 pixels) and use a tiled sprite for the space background.
- Finally, the mp3 are also huge, one is 7mb. We should reduce them to 100-200kb max. We might need to either reduce their quality or cut them.

This is arguably a problem that the app is not warning you about this, we have something on the roadmap to display warnings but we never implemented these.

Gameplay:

I would maybe add an effect or two when destroying the second enemy, and make the level a little longer.

Events and behaviors:

In terms of implementation, I think we should try to use more behaviors to reduce the size of the events sheet:

let's try to use "Parallax for Tiled Sprite" behavior for the foreground and backgorund.
Unfold all event groups (we don't fold anything for examples)
Avoid group names like "Init", this is frightening for a non technical person :)
Let's us a smooth camera extension for following the player.
You don't need the extra variable here:

Basically we must try to find a good balance between using enough reusable behaviors, and still keep things in the events sheet but without overcomplicating something.
In case of doubt between: should I do something simple with a behavior or should I do exactly what I want with 3 or 4 events, always choose the behavior.

I think we'll get a great example this way! :)

Answer 2 · 2022-02-17T07:38:19.000Z

Platformer_ver1_0_1.zip

Note: In this version I introduced two new extensions. One is "SimpleSmoothCameraFollow" and the other is "VolumeFalloff." The goal was to keep smooth camera following and volume falloff but without using lerp or complicated events directly.

As for the camera extension, I see that Davy has a PR for something like this, but if I understand correctly, it is a relatively advanced extension which he needs time to work on. I propose that in the meantime, we release an extension like the one in this file, which is essentially just a drop-in replacement for the "Center the camera on a player within bounds" action from the standard actions, but smooth.

I propose we then do the same for the "Volume Falloff" extension.

If you're okay with this, then I'll go ahead and complete the metadata for both of these extensions and make PRs for them to be part of the official extensions. Then I can add them into this project.

Otherwise, we can consider restricting the functionality of the game so we don't need these extensions, and we can also consider waiting for Davy to finish his camera following extension!

Anyway, here's a changelog:

Game resolution in half
All animations reduced to max 10 frames
All image assets resized to their in-game size and padding removed
All audio assets cut and compressed 112 kbps mp3 (the largest, crickets.mp3, is now ~150kb)
Everything that can be a tiled sprite is now a tiled sprite
Level made a little longer
Added particle effect on killing the second monster
Fixed last platform clipped (Wesley mentioned this in Discord)
Fixed mobile control touchscreen issue (Wesley also mentioned this in Discord)
Removed door glow having sinusoidal opacity over time
- If you want to re-include this, we could make another extension, something like "Oscillating Variable" which gives a variable the value of a sin function with variable amplitude/period
Removed checkpoint glow due to significant clutter in the event sheet
Renamed "Init" group to "Beginning"
Replaced manual Parallax with the relevant extension
Improved collision boxes
Replaced smooth camera logic with new "SimpleSmoothCameraFollow" extension
Replaced volume falloff logic with new "VolumeFalloff" extension

There's probably more, but that should be most of it.

Answer 3 · 2022-02-17T15:19:59.000Z

A small review on usability and thing to polish, I did not review the events.

Thumbnail.png is quite large, in the editor this is never taller than 72px, so 100px will be fine.
In the best practice guide we ask people to move all resources in an assets folder
This is the best practice guide for example: https://wiki.gdevelop.io/gdevelop5/community/guide-for-submitting-an-example
For extension we've another guide:
https://wiki.gdevelop.io/gdevelop5/extensions/best-practices
The description in a function always finish by a period.
Functions have a default name "Function"
The latest enemy is too close from the edge of the platform, I hit it a lot before killing it.
Door haven't interaction, I think we can add a message on the screen when you use it, like "Congratulation you won XXX coins!", something to understand that we've finished playing the level.
Gold diamond look like a big coin not a checkpoint, but why not
On the hero there is an unknown behavior
Object "CameraBoundBottomRight" is a bit far, you can move it to bottom right corner or Platform4 object, otherwise, we can see the limit of Platform4 platform.
The tiled sprite object BackgroundPlants isn't really tiled, we can see the borders.
On the ladder, the hero doesn't have a back animation? It looks strange actually to up on a side.

Answer 4 · 2022-02-17T16:57:01.000Z

Great improvements so far! And thanks Bouh for your review. A few more stuff from my side ;)

Gameplay: the collision masks are not exactly rectangles, so the player can walk on the edges:

This is arguably because of the UI which is not helpful... but still go through the collision masks and make sure all X/Y positions are exactly aligned for all edges (take the opportunity to use round numbers).
Sound design: I love the background musics and jump sound and the sounds effects 👏
Level design: I still feel like we could add a platform at the top of the ladder, with a "jump tru" platform behavior, so that when we reach the top we stop on the platform :)
For events:
- Still some events that can be behaviors: you should be able to replace this:
  
  by either Sine Movement, Rectangular Movement or maybe Timed Back and Forth Movement (but without flipping the sprite). We'll have 4 less events 👍
- Nitpicking: Collision condition are fairly expensive, prefer to run once and do sub events according to if the player is falling or not:
Same for the fly - this will also make the events a tiny bit easier to read (less repetition)

With these additional behaviors and rework, I think we should get to something fairly approachable and simple :)

Answer 5 · 2022-02-18T01:07:31.000Z

Platformer_v_1_0_2.zip

Level design: I still feel like we could add a platform at the top of the ladder, with a "jump tru" platform behavior, so that when we reach the top we stop on the platform :)

I don't have a specific sprite for this. Do you think it's best to make a wooden platform that looks similar to the ladder sprite?

If you think it should be a similar looking platform to the others, this poses a potential problem since it would require duplication of one of the platform objects (one that is jump-thru, one that is not).

Let me know how you feel on this :)

On the ladder, the hero doesn't have a back animation? It looks strange actually to up on a side.

Yes, I agree, I simply tried the best with the assets we have.

Ideally, we would have a specific climbing animation. I am happy to try making it myself, however since I have 0 experience with character animation, I cannot guarantee that the end result would look excellent.

Door haven't interaction, I think we can add a message on the screen when you use it, like "Congratulation you won XXX coins!", something to understand that we've finished playing the level.

That would be nice, but I'm not sure how exactly to implement this simply and without introducing significantly more events. Do you have an exact idea on how this could look and still be implemented simply?

Gold diamond look like a big coin not a checkpoint, but why not

I am simply copying the design on the gdevelop.io homepage. I figure the designer was going for an element of visual consistency by keeping them the same color - what kind of design do you think we might go with for the checkpoint instead?

The tiled sprite object BackgroundPlants isn't really tiled, we can see the borders.

I don't have a great idea for a solution to this. We can include a flipped version of the background sprite, but this will double the file size. Do you think its noticeable enough to be worth remaking the background?

Other than this, here's the changes in the linked version:

Thumbnail.png reduced to 100px
Extensions changed to comply with extension guidelines
Camera extension posted
Volume extension posted
Last enemy moved to the right to make it easier to get on the platformer
Removed unknown behavior from player object
Replaced camera bound
Collision masks fixed
Replaced the movement with Rectangular Movement with "vertical distance" set to 0, since the two "move back and forth" extensions flip the sprite, and I couldn't figure out a way to change that behavior
Grouped the collisions for greater simplicity in events/better performance

Let me know if I missed anything !!

Answer 6 · 2022-02-18T06:42:59.000Z

Max - Great work on this! The new look and feel will really help people understand GDevelop has leveled-up!

Here are some of my thoughts on v1.0.2:

Gameplay:

Add a wall to prevent player from falling to the left. The original platformer did this, it makes players feel safer, especially when the camera doesn't follow them when they go left.
Same thing with the right-side, don't let the player fall off the right side of the screen
I really like when "Constant Movement" is disabled on the moving platform, but that is a personal preference. I think it feels more natural, and provides more time for player to make the jump.
Why not add a small amount of vertical movement on the Flys (using RectangularMovement extension)?
How does the player know if they won? "Is there some secret button or key for me to get into that cool portal thing? Why is nothing happening?"

Events:

Try grouping events with similar conditions. It is easier to read and can reduce CPU (in this case not much, but things like collision checks can add up)

Assets:

Remove Left/Right (since they are not used)

Keep up the good work!

Answer 7 · 2022-02-18T11:54:55.000Z

Love the new design. Though I have some things to say,

The example shouldn't use the Health extension because I think it makes the things a bit too abstract for something really simple. Though the use of extension should be taught to new users, they should be aware of how to do it in "plain GDevelop"
The assets look oddly big compared to the player. Ex: The coin and the checkpoint and the ladder
Seperately, I agree with bouh that the gems/checkpoint look like collectables. If you look closely on the animation on the website, the gem is also a collectable there.Maybe the door with the eye could be used?
The game window is too cluttered imo. Maybe it is because of the large sizes of assets or it might because there is too much happening in the background image (bg-plants)
The background tiled object's offset could be changed to achieve the movement effect like on the old platformer.
Use a light object for the door glow. Maybe light will be too complex for new users?
The enemies image quality seems to be a bit lower than the others, is it just me?
There are some unused resources
Every folder seems to have a .DS_store file. It should probably be removed
In the README file. The heading might cause some issues. Not sure how the descriptions are formattted according to the readme

:)

Answer 8 · 2022-02-25T08:45:59.000Z

Platformer_v_1_1_0.zip

Thanks for all the great feedback! I think this version is significantly better :)

Light object for door glow

I ended up not doing this for a few reasons: for one, it makes things quite complicated for a simple started project. Also, the light shadows do not play well with the hitboxes of the platforms. Plus I'm not sure of a way to light the foreground separately from the background.

The background tiled object's offset could be changed to achieve the movement effect like on the old platformer.

This is the case currently, at least if you're referring to the parallax. It's subtle, but I am confident that subtle is best for this, since we want the foreground to feel separate from the background to reduce the feeling of 'clutter.'

Changes:

Created climbing animation
Adjusted the size of most objects to be smaller in relation to the player (Once we all are in agreement about the size, I will post a final version to resize the files to decrease sizes)
Shifted the background down to decrease clutter
Scaled cloud sizes by 2/3 to decrease clutter
Re-rasterized the enemy assets to attain maximum quality
Added invisible jumpthru platform to top of ladder
Added end screen upon interacting with door
Changed checkpoint to eye sprite
Adjusted background y offset so that the tiling is significantly less obvious
Add walls to left and right side of game window
Disabled constant movement on platform
Added vertical motion to the fly
Cleaned up events with grouping
Removed unused assets
Removed health extension, replaced with boolean variables
Removed .DS_Store files (I think, OS X is annoying about this)
Removed markdown header from README

Answer 9 · 2022-02-25T14:22:39.000Z

Thanks everyone for your feedback!

I like the new ending screen and the game is nicer to play now. Still a few stuff on my side 😉

Gameplay:

Reduce the Monster Fire collision mask to a smaller rectangle. It's super irritating to be considered to touch the monster while you did not because of the transparent margins around an object. Typically the kind of thing that make you rage qui the game and GDevelop. Always make things in favor of the player: to be considered to touch the fire, you must really be colliding with it, and even add a safety margin so you can be seen on top of it and still the game gives you a pass.
Let's reduce again the platforms sizes. Even in the latest version it still gives the impression the player is not super agile or won't make it during a jump because platforms are huuuge. Again it's because we based this on assets that were made to be beautiful, but not made to be interesting in terms of gameplay. Still, I think it's worth making the platform smaller.
Also this will allow to move platforms to create more interesting layout. The moving platform is taking one third of the screen height, that's huuuuuge.

Events:

Can we rework these events to be using an object timer and a an object variable? This is giving otherwise a bad example that scene variables are the way to handle multiple objects, while every object should work on its own:

These events are also a bit complicated I think, or maybe an animation would have worked better?
The "Grass Sounds" events are taking a huge space (basically a small screen height) for something not that important for a new user. Should we find a way to hide them? Or do something simpler.

Nitpickings:

ScoreUI => Score (or ScoreText). For a new user, UI is not a well known acryonym (and it's not a user interface, it's a text).
Remove the toggled off event.
There is "an unknown or unsupported instruction".
Unknown behaviors on objects to remove.
Is the Fly object removed when out of screen? It's important we clean up everything.
Let's add a second monster and a third fly (even if it's making the level a bit longer, but with smaller platforms not necessarily). Important to show that all objects are working even when there are more than one.
This is frightening for a new user. Can we simplify the first event or even remove it? I'm willing to have stuff a bit less polished if it simplifies the events.

About other remarks:

Use a light object for the door glow. Maybe light will be too complex for new users?

Let's not to it to keep the example simple and efficient.

The example shouldn't use the Health extension because I think it makes the things a bit too abstract for something really simple

I have fixed feeling on this but agree this can be done with a simple variable so let's avoid Health then.

Answer 10 · 2022-02-27T18:22:55.000Z

The "Grass Sounds" events are taking a huge space (basically a small screen height) for something not that important for a new user. Should we find a way to hide them? Or do something simpler.

I think we should use a single audio file (most users won't have multiple sound files) and randomize the speed it plays, like you show in this example: https://www.youtube.com/watch?v=3akue2EwDPU

GDevelop_hu126zHRlh.mp4

Answer 11 · 2022-02-28T17:30:16.000Z

Platformer_v_1_1_4.zip

Thanks to Wesley for a lot of these changes!

Features:

Added a dust particle to the feet of the player in the same event as the grass sound effect. (ft. Wesley)

Fixes and Improvements:

Level re-designed to incorporate more enemies (2 monsters, 3 flies)
Monster fire hitbox reduced
Platform size reduced significantly
Reworked monsterfire to be using an object timer + animations rather than two separate objects
There is now only one grass sound, and it is varied by altering the pitch randomly (also we removed the need for a timer by playing the sound on the character's walk frame, rather than on a timer)
Object name change: ScoreUI => ScoreText
Layer name change: UI => Overlay
Cleaned up events
Removed fly object when off screen
Remove unsupported instructions/behaviors (oops!)
Eliminated the first "center camera" event + made the second event significantly cleaner by replacing CameraBound functions with explicit coordinates
Fixed the collision box being off center, which was causing the back on wall jumping.
-"Fixed" the audio file for the door loop, and converted it to an ogg file.
Reduced grass sound event to a simpler format using the animation frames as the triggers, and a pitch shift instead of 4 different sounds.
Removed cloud opacity event.
Moved cricket sound to the background group and commented that it was "background sound".
Compressed all of the separate background images to a single tiled sprite that repeats seamlessly and used X offset to scroll the background.
Changed the movement of the clouds to X offset as well.
Removed camera controls for the cloud and background layers.
Removed parallax extension. (Wesley did this, apparently he talked it over with you Florian, though if you still would prefer the parallax extension just let it be known, we can always go back)
Removed HelperObjects group, and removed the action at the beginning of scene to hide the group.
Deleted unused events in Monster group.
Removed "GameEnd" variable, and replaced the condition for the camera control with the visibility of the game end layer instead.
Removed door glow object and replaced the effect with the advanced bloom effect. (size of the image increased so the bloom didn't get cut off at the edges of the object)
Removed fire monster scene variable.
Removed height and width from global variables.
Condensed grass and jump volume global variables to a single "GameVol" global variable.
Changed end game trigger to the door collision, and changed the collision mask for the door to work better for this.
Merged door and end screen groups.
Moved mobile controls above player animations so they trigger in the same frame.
Many more comments explaining events
Fixed player hitbox to disallow jumping off of the side of a platform (the player hitbox was not centered so it was able to collide internally with the platforms thus causing a jump retrigger)
Moon position changed

Known bugs:

The player can jump on the side of the platforms when the platform is pushing in to the player.

This last one appears to be a bug. I'll make an issue for it if no one can see a solution.

Answer 12 · 2022-03-01T11:54:52.000Z

All good stuff!
A bit sad about the parallax extension, I know it's making us save only one event which is simple, but in the goal of promoting more games built on behaviors, I would still have kept it... but I'll leave it up to you to decide.

I think I had a bug where the running footsteps sounds and effects were not launched. I think this can be 100% fixed with the condition checking if an object is on specific floor:

Because this is the floor condition from the platformer object, it's guaranteed to work 100% of the time if the player is on a floor. Otherwise, with the collision condition, there is a small risk there is a gap between the player and the platform (can happen).

Apart from that, and the bug to investigate, I'm happy with the state of the game! Maybe a final addition would be to demonstrate putting a button on the end layer, and reset the scene when played. If it can be done in a few events, as simply as possible, then it's good to do it.

Great work @charburgx, Wesley and everyone there :) Let's go ahead with a final version :)

Answer 13 · 2022-03-02T19:18:50.000Z

Platformer_v_1_1_5.zip

Alright, here it is! I added the floor test condition as well as the retry button. I also minified a number of the assets to keep the bundle size to a minimum 👍

Go ahead and have one last look for any last comments :)

Thanks to everyone who gave feedback! I think this is gonna be a great addition to the examples.

Answer 14 · 2022-03-04T12:19:49.000Z

Amazing!

Here a short things I noticed:

Player can't go down on the ladder, think to check inside the player behavior this checkbox:
I suggest FPS max to 0 for unlimited ?
Check the first toggle to get same collision mask on all animations, specially for climbing animation you added (btw sprite is nice when climbing! ) Otherwise the Hero is a gym monster
Mobile inputs doesn't works because of this main event block the sub-events:
crickets.ogg is terrible on smartphone, there is a continious noise behind the crickets, it's aweful on smartphone
Not sure we want show to people missing values

Answer 15 · 2022-03-04T15:16:10.000Z

I suggest FPS max to 0 for unlimited ?

No it's a good idea to keep it at 60 especially for mobile devices to avoid draining their batteries by rendering too much.

Answer 16 · 2022-03-07T18:29:51.000Z

Platformer_v_1_1_6.zip

crickets.ogg is terrible on smartphone, there is a continious noise behind the crickets, it's aweful on smartphone

I tested this on my Google Pixel 2 headphones, both on the web build and apk build, and was unable to repeat this issue. It may be a problem with your phone speakers?

Changes:

Allow player to go through jumpthru platforms
Toggled same collision mask for all player animations
Made ladder collision box thinner (to prevent player from hanging off of the side)
Removed missing values from smooth camera function
Fixed mobile controls

Answer 17 · 2022-03-07T19:31:01.000Z

I think the camera following extension should be a behavior. This way, the video will still be up to date when the extension is released.

Also, there should be an independent action to keep the camera in the area as the action will either be added by this PR:

4ian/GDevelop#3703
or added in a community extension if the PR is rejected.

Answer 18 · 2022-03-08T20:12:59.000Z

This is nice 😃

Can I suggest adding vertical movement to the parrllax and camera shake would be nice landing from a fall?

Answer 19 · 2022-03-10T00:25:41.000Z

Platformer_v_1_1_7.zip

Made a new behavior for checkpoints as per your request @4ian. If there is no immediate feedback for it I'll make a post for it on the extensions repo :)

Camera shake

Would be very nice! We're trying to limit the amount of events as much as possible so I haven't added it, but if others think that the positive of having it in outweighs that then it will be added for sure.

Vertical movement to the parallax

Since we decided to go with camera offset, this would probably add a little more complexity than we would like. If we decide to go back to using the parallax extension then this would be more than doable.

Changes:

Made controls significantly larger
Moved checkpoint actions to new "Simple Checkpoint" behavior

Answer 20 · 2022-03-17T08:52:28.000Z

Setting an effect might calculate a new image for the object, it should be done only once.
Can a checkpoint be disactivated? I don't see when it should and it stays activated in the preview.

This event seems to work the same:

About "Active a checkpoint" parameters:

"Set spawn point", in which use case could it be set to false?
"Set spawn point even if checkpoint is already activated", this should probably be a property as it probably won't change during a game. In this case, should games only keep one checkpoint activated or use a 3rd state for visited checkpoints? I'm not sure this can be done in a behavior. If not, the parameter might just need to be removed and let extension users handle this.

Answer 21 · 2022-03-24T15:54:32.000Z

@charburgx how are you getting on with changes?
Need a new review?

Answer 22 · 2022-04-13T19:22:24.000Z

I made tiny changes:

Rework what suggested by @D8H in previous comment just above.
Add trigger once on actions "Key pressed left/right" to flip the object once, and not every frame keys are pressed. (a tiny optimization)

Nothing more changes, it have to fit the first video.

Platformer_v_1_1_8.zip