pomle / megamanjs Goto Github PK

An attempt to remake Megaman 2 in JavaScript with the end goal being a reusable platform engine.

JavaScript 97.13% CSS 1.26% HTML 1.61%

megamanjs's Introduction

megamanjs

Project that aims at creating a game engine in JavaScript using Megaman 2 on NES as guide. WebGL is used as renderer and despite Megaman 2 being a 2D game it is run in 3D space using THREE.js as 3D lib.

Deployed at http://megaman.pomle.com/

This project have generated the SnakeSilk Game Engine and the following libraries:

snakesilk-engine Simple game engine providing game Entity, Timer, Scene, etc.
snakesilk-xml-loader Loader creating entities and scenes from XML.
megaman-kit Components for creating Megaman games.

Follow the project blog at https://medium.com/recreating-megaman-2-using-js-webgl

Running

Clone repo.

  git clone https://github.com/pomle/megamanjs.git
  cd megamanjs

Install dependencies
```
  yarn install
```
Start; should open game in a browser.
```
  yarn start
```

Developing

Prerequisites

Make sure you are running Node.js >= 7. Installation instructions for your platform can be found at https://nodejs.org/en/download/package-manager/.
```
  node --version
```
Install dev dependencies.
```
  cd megamanjs
  yarn install
```
Run test suite.
```
  yarn test
```
The test suite begins with running a Mocha unit test in Node. After that a Chrome window should open and run a browser test.

Contributing

Contributions are welcome.

megamanjs's People

Contributors

Stargazers

Watchers

Forkers

tchaircare charlie8230 helsaba bouveng the8bitsgames serchavalos nathan-lapinski sbadakhc lagden calderaro yezily justforkin dotopstory brendansparrow bijanbwb mikhael-dantas jordant97 terance-tucker web3emulator

megamanjs's Issues

Megaman should change color according to which weapon he uses.

Megaman Quick Boomerang

Finalize Bubble Man's Level

Increment checkpoint index when checkpoint reached.

Energy and Ammo meters are not exactly right

Should only show full when exactly 100%.
Should only show empty when exactly 0%.

Create Crash Man's Level

You can fall thru the floor on lower level in Flashman stage.

Create Dr.Wily Level 2

Create Air Man's Level

Megaman Crash Bomber

Fix Human Input reading

Instead of binding things directly to the event, a state should be updated instead and then read on every simulation update. This should make it easier to control human input and get rid of some bugs like being able to control characters that are dead and immobilized.

Create Dr.Wily Level 3

Copying velocity from objects have side effects while timestopper active

Since we copy the velocity from an object we are standing on, we will get the objects internal velocity and not the objects apparent velocity.

This is a problem when standing on a moving platform while it uses a different time stretch than our own.

Potential fix is that time stretch is applied on the velocity when it is calculated and not when it is applied to the position of an object.

Refactor texture handling

Don't load textures in constructor.
Singleton texture or resource loader class.
Decouple TextureManager and Texture utils perhaps.

Megaman Item 3

Create Dr.Wily Level 4

Megaman Air Shot

Adjust Megaman's climb speed

Climb speed needs to be tweaked to reflect the real game.

Create Dr.Wily Teleport and boss fight stage

Create Bubble Man's Level

Finalize Flash Man's Level

Megaman Metal Blade

Remove legacy Health event.

Health should have a proper event handler.

Too difficult to land on platforms when vertical speed high

When the fall speed is high, the margin for when a characters lands on a platform is too low.

How to reproduce:

Set up two solids with a gap of 32 units, this will be the jump that you need to bridge.
Above the landing platform, put a solid 32 units exactly above the landing area.
Megaman will not be able to land after the gap.

Level XML for testing below.

<?xml version="1.0" encoding="UTF-8"?>
<level>
    <camera smoothing="0" />
    <gravity x="0" y="983" />

    <layout>
        <solids expose="true">
            <rect x="-16" y="32" w="64" h="16"/>
            <rect x="96" y="32" w="64" h="16"/>
            <rect x="96" y="-32" w="16" h="32"/>
        </solids>
    </layout>
</level>

Rename Engine.Scene to Engine.World

Referring to what the engine is running makes more sense as a world and avoids confusion with THREE.Scene.

Megaman Item 2

Create Dr.Wily Alien Level

Jump height has been affected.

Since Physics trait was introduced, jump height of Megaman, and possibly others, have been affected.

Megaman Time Stopper

Create Heat Man's Level

Ladders should exist

Refactor sprite animation system

Instead of referencing this string when creating a frame

var fromFlame = this.sprites.addSprite('fromFlame');
fromFlame.addFrame(0, 144, .03);
fromFlame.addFrame(48, 144, .03);
fromFlame.addFrame(96, 144);

we could simply expect the returned object back when setting.

Mesh tile grid can be seen

There seems to be a slight gap between the background tiles.

Create Flash Man's Level

Create Metal Man's Level

Crash Bomb collision zone is not honored.

Exposing the collision zone shows a big radius but objects needs to be much closer in order to hit.

Megaman costume color texture maker poorly optimized

Color replacement is done on the upscaled version. We could do it on the original sprite size instead.
The color replacement is pretty fast, but would be magnitudes faster if we ran it on the smaller.

For Megmans sprite sheet we are looking at 256x4x256x4 pixels instead of 256x256. 1 048 576 vs. 65 536.

Megaman Item 1

Megaman Atomic Fire

Honor jump force

Since gravity was integrated into the physics trait, it is now applied after jump inertia has been applied, which makes the jump force exactly one gravity unit smaller than before.

The previous model overrode the gravity force, effectively ignoring it by setting inertia to current inertia + force.

Proposed solutions:

Add ~16.5 units of "missing" force.
Gravity trait that is applied before jump.
Separate gravity as a special force that can be ignored.

Content Squad should do one of the music tracks as an easter egg

Preferably vocal only barbershop.

Add Megaman's death animation

Refactor Engine events.

After simulate and render events are called and this could use a nicer setup using Engine.Events for example.

Create Woodman's level

Running animation does not look right when toggling between shooting and not

Create Dr.Wily Level 1

Pixel perfect port?

Hi, are you still working actively on this project?

Are you looking to make a pixel perfect port? If so, maybe you could use a JavaScript emulator running the original game in the tests. The idea is to compare a few frames from this game and the emulator and make sure you get the same result from a similar set of commands (like jump, shoot, run...). This could be used to test the levels and enemies behaviour too.