Sharing my game, a clone of the VVVVVV platformer; full source code and melonJS highlights

[Alexandre Dantas]

Hi guys!
First, thanks for all the help you're giving on this group.

It is an indispensable tool to learn melonJS - countless times

I saw questions answered here that helped me so much...

Okay, on the last few days I made a low-resolution clone of

the VVVVVV game, called it WWW (as in 6 Vs packed by two).

For those who don't know, it's a retro platformer on which you

cannot jump; instead you avoid obstacles by inverting the

gravity. I know it sounds strange, but it's highly addictive and

everyone should give it a try.

• Here's the link on GameJolt;
• Here's the full source code on GitHub;

Now, I'm not just shamelessly promoting myself; I learned a

lot of melonJS while developing this game.

Unfortunately I didn't found many games made with melonJS

with available source code.

So I want to share this knowledge I learned with you guys.

I'm pointing some highlights of what I did on my code and 

I hope you all can learn a bit and improve it too.

So fork it, copy it, share it, do anything you'd like with them:

• First, I split all the entities into several files - one for each entity. I found this way better because it makes the project organized and it's clear where to find problems when debugging. I know it's not an original idea, just making a suggestion for your next projects.
• I made the viewport act like on Zelda and Metroid, on which the screen follows the player but only one step at a time. On this case, it scrolls at every 32 pixels, but it's trivial to adapt to your screen size. Also, you could make a Tween to smooth the transition; making it just like on Zelda.
• One of the key aspects of VVVVVV is flipping the gravity. Here's the function that does that - notice the adjustments I had to do on the PlayerEntity.
• Created checkpoints, so when the player dies it returns there. Also, the respawn function.
• Created static texts you can place on the map with Tiled and they'll float, acting like they're part of the scenery. You can also change them at runtime and have lots of fun.
• Here's an example of a ParticleEmitter - I simulated stars on the background.
• This is a type of Enemy that bounces on the scenery. It can scroll horizontally, vertically or both. You place it on the map with Tiled and just let it be, without worrying about it's path.
• This is an entity that, when collided, throws a browser alert(). Nice for debugging stuff on the map and you can change it's action to anything you like easily.
• Made an in-game menu you can control with the keyboard. It has some things hardcoded but it's well-commented, meaning you can easily change it to fit your needs.
• Created a customizable progress bar! Based on the one MelonJS uses for it's loading screen, you can change it's foreground/background colors and x/y/w/h.
• I'm not very proud of this one, but here it goes: a pauseHandler. Meaning you can pause the game on any state you want and show anything you'd like (a Renderable, a "PAUSED" text, a pause menu...). The reason I'm not very proud of it is because the coding is kinda sloppy :(
• A working example of a custom loading screen.
• Scrollable credits screen - you can throw a text as large as you want and the user scrolls it with no problem.
• An example on how you can receive clicks on the game screen and react to them. Nice for touch devices.
• Little helper to change the browser window title on-the-fly.

Phew! I know it was a lot, hope I'm not wasting too much space on the server ;)

[Chris Jones]

Dude.. this is excellent. VVVVVV was an AWESOME game and this is a great start. It isn't a fluid as that game yet, but dear lord. I envy this. Congrats on something that takes me RIGHT BACK to the game.. and in fact makes me want to play it on my 3DS when I get home.

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[melonJS]

Very very nice ! I’m not sure I actually ever played the original one to be honest, but once I got used to the control and the gravity change, it was really fun :P

Also, did you notice the melonJS gallery, we try to put as much game there that include source code, and if you are ok I’ll probably add yours as well !

Thank you again for sharing your game here, and as well for the very interesting development feedback .

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.

[melonJS]

and the gallery :

http://melonjs.org/gallery.html

[Alexandre Dantas]

Wow, I'd be very happy to have it displayed on the gallery!

I hope to create more levels and make it more interesting; anyway it was a nice experiment and I definitely fell in love with melonJS.

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.

[Alexandre Dantas]

Thanks, your feedback meant a lot to me!

I absolutely love VVVVVV and it was very fun to create this little experiment.

I want to create the platforms and inversors soon! With those I can

finish "copying" the standard levels.

Also, it would be nice to add support for loading user levels on-the-fly.

What do you think?

[Alexandre Dantas]

Hello, everybody!
I just implemented a couple of things you might find interesting.
They're thoroughly commented and, as usual, you can freely use
those on your games:

• On this commit I made the player able to walk slowly when you hold Shift. It's a simple feature that's also simple to implement. Now a challenge would be the opposite - holding Shift to make it run.
  
• I created a little class called RepeatableSpriteObject that extends SpriteObject; with it you can create entities on Tiled that repeat a sprite along it's area. So, for example, instead of placing spike by spike you can create a large area and it would have lots of spikes - less entities means more performance!
• Finally, I made three different types of platforms: a regular platform (when you step on it, it blocks your way), a vanishing platform (that disappears after a while when you step on it - used me.Tween for animation) and a movable platform (that moves according to a specified area on Tiled - both horizontal and vertical).

To make those I had to explore a lot of the melonJS' source code.
I recommend everyone to do so once in a while; it's nicely coded
and there's lots of stuff to learn from there.

[Jay Oster]

Hi Alexandre,

RepeatableSpriteObject sounds really great! We might want that functionality built into melonJS by default. ;) ImageObject is already repeatable, but we can make TileObject do it as well.