[Live Demo available!] Motorbug Engine - HTML5-based sonic fan engine! (WIP)

[Coderman64]

This is a 360° ("sonic-style") platformer engine completely written in JavaScript and HTML5 allowing you to develop this style of platforming games for the Open Web.

Live Demo at: https://coderman64.github.io/motobug-engine/

features

• 360° Genesis-style Sonic physics.
• Sound effects and music via HTML5 audio
• Controller support (through the JS Gamepad API)
• touch controls support
• full debug interface (press i, or double-tap with four fingers on mobile)
  • Press L to change the level
  • hold v and use arrow keys to view around the level
  • change character by pressing p (works outside of debug mode)
  • slow down to about 1/4 speed with c
• A full python-based level designer (see Motobug Studio on GitHub) (BETA)

How is this different from other "sonic-style" engines?

a number of different engines exist that do quite similar things to Motorbug. The most notable of these (off the top of my head) is the Sonic Worlds engine(s). These are quite fully-featured and well-tested engine(s) and are much better than Motorbug in most cases. However, to fully utilize this engine, you need to install Multimedia Fusion 2 (MMF2), something I personally don't want to pay for.

Motorbug, while quite a bit more buggy than Sonic Worlds, depends only on the open HTML5 & JavaScript standards, which means it can be played in any modern browser (including your phone).

This gives it several advantages:

• You don't have to download any games that potentially contain malware.
• It is incredibly portable and can be played on platforms that would typically be difficult for a sonic fangame (like Xbox One and Mobile phones).
• It works on OSes like Linux and macOS seamlessly, without the need for a specific port.

There are also some other implementations of sonic physics written in JS (like this), but they seem to be a bit buggier, and more experimental.
Screenshots


How can I Get Started?
Currently, the best way to get started designing levels for Motobug is to use Motobug Studio, which is currently in Beta. While the engine has come a long way since its initial creation, do note that it is not yet capable of creating a fully-featured fangame.

Where can I learn more?
More info and source code are available here: https://github.com/coderman64/motobug-engine/

NOTE:
This is a project that I have developed thus far in my free time, and may not receive any support in the future.
Also, many assets (some sound effects, tiles, sprites, etc.) were made by me, and you can use them in your own fan games under the CC-BY-SA license.
There were also many assets used from various other fan projects, as well as official games by SEGA. I do not claim to own these assets, and you should seek the original creators for more info. (I believe I credit the creators on the GitHub readme).

 

[Electro]

A few problems:
Spindashing feels weird.
You can pause in title card introduction.
Drop dash doesn't sometimes.
Also the drop dash feels like an mini homing attack.

 

[Coderman64]

A few problems:
Spindashing feels weird.
You can pause in title card introduction.
Drop dash doesn't sometimes.
Also the drop dash feels like an mini homing attack.

Thanks for the feedback!
The title card pausing issue can be fixed easily, though I have a few questions about the other things:
- Maybe I'm too used to it, but what do you mean by the spindash feeling "weird?"
- The drop dash needs a little time to charge before hitting the ground (just like in mania). Is this what you are referring to? Any ideas on how to make this more obvious, without shoving it in the player's face?
- If you used Shadow, he actually does have a homing attack. Is this what you are talking about? If it is just a critique of the move itself, it is something I lifted from Mania.

I know I might sound picky, but the more specific we can get, the better I can diagnose the problems.

 

[Electro]

Thanks for the feedback!
The title card pausing issue can be fixed easily, though I have a few questions about the other things:
- Maybe I'm too used to it, but what do you mean by the spindash feeling "weird?"
- The drop dash needs a little time to charge before hitting the ground (just like in mania). Is this what you are referring to? Any ideas on how to make this more obvious, without shoving it in the player's face?
- If you used Shadow, he actually does have a homing attack. Is this what you are talking about? If it is just a critique of the move itself, it is something I lifted from Mania.

I know I might sound picky, but the more specific we can get, the better I can diagnose the problems.

"The drop dash needs a little time to charge before hitting the ground (just like in mania). Is this what you are referring to? Any ideas on how to make this more obvious, without shoving it in the player's face?"
Yep.

 

[Coderman64]

"The drop dash needs a little time to charge before hitting the ground (just like in mania). Is this what you are referring to? Any ideas on how to make this more obvious, without shoving it in the player's face?"
Yep.

Hello again! Fixed the title card issue, and halved the time for the drop dash. Does that help?

 

[Coderman64]

UPDATE!

After some work and performance upgrades, I decided it was about time to add some eye-candy.

So, I added an experimental motion blur/after-image mode. To toggle it on, press <i> to enter debug mode, then <m> to enable motion blur. When enabled, you'll get afterimages if your character's speed equals or exceeds the maximum speed they can reach under their own power. (AKA when Sonic goes into his leg-spinning animation).

Tell me what you think! (If I get good feedback, I might enable it by default).

Here are some screenshots with all three characters:

 

[xsdfr]

It is a good engine, but it has some issues. Silver can float through edges of ceilings, Shadow and Sonic sometimes get stuck in walls and the abilities sometimes just don't work.

 

[Coderman64]

It is a good engine, but it has some issues. Silver can float through edges of ceilings, Shadow and Sonic sometimes get stuck in walls and the abilities sometimes just don't work.

Hey, xsdfr!
Thanks for your response! I know about the problems with Silver (I suppose it's about time that I get around to fixing it). Though I'm pretty sure I fixed most of the clipping problems, and I'm not sure what you are talking about with the abilities not working... could you send screenshots or screen recordings of these problems? If you need a screen recording program, I have one on my GitHub here: https://coderman64.github.io/screen-recorder/.
Thanks,
Coderman64

 

[Coderman64]

Hey all! I know it's been a while, but I've got some updates.

While I haven't done much in the core engine recently, I've started working on a level designer/editor, which I'm calling Motobug Studio. The idea is simply to make development with Motobug much easier and more approachable to beginners, as well as making things more efficient for everyone.

It's still a work in progress, but it has come a long way since I started:

Head over to https://github.com/coderman64/motobug-engine-designer to download it and check it out if you're interested. If anyone is familiar with Python and wants to help out, I would greatly appreciate it!

 

[BlazefireLP]

This sort of inovation and outside the box thinking is exactly what I love to see. It obviously has ways to go and has it's own quirks and bugs but I can see the potential here. Keeping my eye on this one :)

 

[DevPlex01]

The engine is good, but I feel like the spin dash should be faster the more you press A while in the spin dash form.

 

[DevPlex01]

Hey all! I know it's been a while, but I've got some updates.

While I haven't done much in the core engine recently, I've started working on a level designer/editor, which I'm calling Motobug Studio. The idea is simply to make development with Motobug much easier and more approachable to beginners, as well as making things more efficient for everyone.

It's still a work in progress, but it has come a long way since I started:

Head over to https://github.com/coderman64/motobug-engine-designer to download it and check it out if you're interested. If anyone is familiar with Python and wants to help out, I would greatly appreciate it!

So you're creating something similar to Sonic Studio, but for HTML? That's cool. Also, great job so far. I'm also trying to make a WebGL Sonic Engine, but I'm making it for personal use, because it isn't really easy for outsiders to use imo.

 

[Coderman64]

This sort of inovation and outside the box thinking is exactly what I love to see. It obviously has ways to go and has it's own quirks and bugs but I can see the potential here. Keeping my eye on this one :)

Thanks, BlazfireLP!

The engine is good, but I feel like the spin dash should be faster the more you press A while in the spin dash form.

Thanks! I know it's a bit hard to tell, but Motobug does actually do this. The algorithm for it is roughly based on the description of the original Genesis version from sonic retro. If you want to see this, hit the <i> key in Motobug to get to the debug mode. Here, you can see that one rev will get you to a speed of about 7, whereas a lot will get you to about 10ish 11ish. The physics guide does say that it's supposed to have a max speed of 12, though, so I'll have to look into this next. Might have something to do with the optimizations that I did to keep it running smoothly under the wildly differing framerates you can get on a less powerful computer.


1 Rev (left) vs. 7 revs (right). See the difference in horizontal velocity on the debug display.

So you're creating something similar to Sonic Studio, but for HTML? That's cool. Also, great job so far. I'm also trying to make a WebGL Sonic Engine, but I'm making it for personal use, because it isn't really easy for outsiders to use imo.

Yup! That's the idea! Probably won't make it as easy to use as Studio, nor will I be switching away from a tile-based system anytime soon (Motobug is pretty deeply rooted in this). Also, I'm excited to see what you make with your engine!

If anyone has additional questions, don't be afraid to ask!

 

[DevPlex01]

Hey there. Also, the spin dash jus needs a bit more speed imo. It can feel to slow even after revving it up a couple of times. Also, my engine is having problems with it using a port of bullet called ammo.js. I might have to move to a more tile based physics system, meaning I'll have to rewrite some of the code in the engine (which kinda sucks). I plan on calling it the Refreshed Engine (get it, cause browser tabs can be refreshed?). Anyways, it's made with PlayCanvas, which I think works by using it's github source engine to create a canvas that updates. I also have seen you before on that post that was also about PlayCanvas. I don't know much about game development with raw HTML and stuff, so i use PlayCanvas as a shortcut. You can try it if you'd like. Although, it uses more APIs of it's own, and it's main scripting language is javascript, but you can create HTML files and JSON files as well I think. Anyways, good luck on your engine.

 

[Coderman64]

Hey all! Finally got around to updating Motobug. This update brings all the new features from my 2020 fangame demo Sonic EXP back into the main branch of Motobug, including:

• A title screen, with animated logos that play beforehand (this is simply a .mp4 video file)
• Save games
• A save-select screen
• New items, including a level-finished signpost, and special stage ring
• polish with some new sprites, sounds, and animations
• and much more!

As always, let me know what you guys think!

 

[xinconety]

Hey all! Finally got around to updating Motobug. This update brings all the new features from my 2020 fangame demo Sonic EXP back into the main branch of Motobug, including:

• A title screen, with animated logos that play beforehand (this is simply a .mp4 video file)
• Save games
• A save-select screen
• New items, including a level-finished signpost, and special stage ring
• polish with some new sprites, sounds, and animations
• and much more!

As always, let me know what you guys think!

i like it

 

[MatthiasYT]

I have a question

does this engine works on mobile browser
such as chrome or safari? Because i’ve tried but the game get stuck on the loading screen.

 

[Coderman64]

I have a question

does this engine works on mobile browser
such as chrome or safari? Because i’ve tried but the game get stuck on the loading screen.

Hey! It sounds like you're running this on iOS. Safari has some issues with this engine, mostly due to its poor support for audio and video formats. Due to Apple's restrictions on iOS, all browsers must use Safari's web engine to be included on their App Store, so they all have the same issues. I don't have an iPhone, so it is a bit hard to test for me.

I do think I have gotten it working in the past, though. Try Sonic EXP, which is a game I'm working on using this engine. I think I figured out all of the formats so that it works on iOS, too. Let me know if you have any issues, and I'll try to take another look at it.

 

[Nascar01]

i am on computer but i couldnt jump with the arrows

 

[Coderman64]

i am on computer but i couldnt jump with the arrows

I mapped the jump button to "A", similar to the default mapping for Sonic Mania. I believe it is best the up arrow remains unmapped for now in case I want to add a super peel-out move later on, though I could likely add additional options for the jump button at some point, such as "z" or the spacebar.

Hopefully, this is alright. In the past, I have found using the up-arrow for jumping doesn't quite feel right...maybe it is just me.