WebglCS (BETA 0.2.2) / WEBGL single/multiplayer CaveStory inspired game

Introduction
This is currently my main project I am working on. It's a "2.5D" engine inspired by CaveStory. The engine runs on Node.js + Socket.io on a server and uses WebGL and Three.js in your webbrowser.
The engine is nowhere near finished and you should expect some heavy development in the near future (with more or less regular updates).
Sourcecode will be published on github soon, when I commented a bit more of it. I will publish a video on how to set up your own server simultaneously.

Play the game online (Beta 0.2)
(Just a short glimps of the engine for now)
BTW. Get some friends to join on the server and have fun
(run a local server for a better experience)

Sourcecode on GitHub​

Screenshots

Spoiler

older images

Spoiler

Videos

Spoiler

Leveleditor / how to make your own levels

Spoiler

Because it is super easy to create levels for this engine, using the tiled map editor, I suppose creating even large projects will be rather easy. You should have a fundamental knowledge of JavaScript + Json (you only need the basics). A detailed tutorial on how to create levels will follow after I published the source.

Custom sprites / MyChars

Spoiler

1. Create an image with all the animations for Running, Jumping, looking up, down... (this is not necessary, but the more animations the better)
1.1 the format for this image is any width and any height per frame (width must be equal to height). Also, all frames must be sorted from left to right and the background should be transparent like so:

or

(note, they MUST only face to the left)
2. save the image from step 1 as "yourNameHere.png"
3. open your editor of choice (notepad is preinstalled on every windows mashine, just use that if you like)
3.1 insert this code:

Spoiler

{
    "imageSize" : {
        "x" : 16,
        "y" : 16
    },
    "animationDuration" : 15,
    "usedAnimation" : "stand",
    "animation" : {
        "stand" : [0],
        "run" : [0,1,2],
        "up" : [3],
        "upRun" : [3,4,5],
        "ascend" : [1],
        "fall" : [2],
        "fallLookUp" : [4],
        "fallLookDown" : [6],
        "look" : [7],
        "hover" : [8],
        "dead" : [9],
        "deadFall" : [10]
    }
}

3.2 Now change the "x" : 16, and "y" : 16 to the width and height of one frame of your sprite respectively. iE. "x" : 16, "y" : 16 would be classical lower resolution CaveStory. "x" : 32, "y" : 32 would be CaveStory+ HD textures. You can go as low or high as you like
3.3 In case you added or removed any frames, you will need to also change that in the "animation" section. If you used the same template as the images above, you should be fine.
3.4 save this document as "yourNameHere.json". make sure you change ".txt" to "any document" in the bottom right if you use notepad.
4. Upload "yourNameHere.png" and "yourNameHere.json" somewhere (need to be in the same folder!).
5. Join a server and open the options. (press "e" → select "options"). scroll down and insert the URL of you image (i.E. www.example.com/MyChar.png) in the "player image + .json" section.
6. scroll up again and click "reload level"

Custom Guns

Spoiler

Will follow shortly

todo

Spoiler

- add music
- implement guns/weapons + projectiles (need cool ideas for that)
- improve velocity calculation (just add a bit of drag to the character movement)
- camera drag / make it rotate and move slower (this shows more of the 3d world)
- a home menu / main menu
- single player option
- a story
- fix multiplayer bug (if you reload the page as the first player that joined, other players wont see you)
- a ton of other (more or less) small things (including bug fixes)

How you can help

Spoiler

- help remake the music / get permission to use remade music
- remake objects found in CaveStory as 3D Models

Update Log

Spoiler

- 29.06.2017 BETA 0.2.2 released

Spoiler

- bullets are now available in multiplayer
- collision between bullets and entities (both local and server entities) works now
- water related bug somewhat resolved

- 24.06.2017 BETA 0.2.1 released

Spoiler

- bullets added
- camera improved / follows the player with a bit of delay (causes bugs with water though :/)
- multiplayer related bugs removed
- added a few levels
- menu style improvements

- 05.06.2017 BETA 0.1.2 released

Spoiler

- reworked the menu
- fancy animations added
- guns added
- reworked the water physics
- reworked friction in game
- reworked knockback
- first attempts to reimplement a single player mode
- Sourcecode publicised

- 13.05.2017 BETA 0.1.2 released

Spoiler

- water implemented
- water physics implemented
- player HUD added
- player health added
- custom-character-sprite browser added
- new level "cave_pillars.json" added

- 23.04.2017 BETA 0.1.1 released

Spoiler

- choose your own MyChar under options
- set a name under options
- any image file with any aspectratio and any size is now supported by using .json files for every sprite

- 22.04.2017 BETA 0.1 released

if you have any questions or suggestions don't be afraid to post them in this thread[/spoiler]

 

Oh my god


This is actually cool

 

Oh my god


This is actually cool

Thank you very much I am still working on it though, and I just added one more image of a level with the actual cave story tileset. (so it looks more like actual cave story).
But yeah, I am pretty open to any suggestions. And recreating cavestory levels should be fairly simple. Just all the enemy scripting would be somewhat of a pain you know. And I am not a good 3d animator, so I might end up resorting to quite a few flat 2d Sprites in this game, if I wont get any better with animating 3d models for webgl.

 

Is it also possible to put in your own custom characters

if you do 2d

Just wondering

 

you should probably not use commercial assets for this

 

Sure thing.

Right now you can use any image as your custom charater, as long as it follows the same format as the sprite from cave story +.
In fact it is very simple to change the sprite you are using for you custom character! just upload an image like this one

and paste the URL in the options of the game (right now I have not added this option to the settings, but the code for that already exists. You might even have seen that there is a curly brace character in one of the screenshots next to my quote).

 

what format? (like PNG, BMP, JPG, etc. )

 

you should probably not use commercial assets for this

Don't worry. I will not. I just use these right now for development. But when actually releasing it, I will remove them.

If someone would like to use the official textures though, you can always upload you own textures and switch to these in the settings.

 

what format? (like PNG, BMP, JPG, etc. )

Anything should go. Well, anything that works in your webbrowser that is haha

 

Don't worry. I will not. I just use these right now for development. But when actually releasing it, I will remove them.

If someone would like to use the official textures though, you can always upload you own textures and switch to these in the settings.

Freeware CS assets should be fine, just not the 2xRes assets from CS+. Case in point: the quote and curly sprites.

Anything should go. Well, anything that works in your webbrowser that is haha

Uhh... you might want to exclude jpg from that list.

 

Freeware CS assets should be fine, just not the 2xRes assets from CS+. Case in point: the quote and curly sprites.
Uhh... you might want to exclude jpg from that list.

Ok. I will do that. But my current idea would be that I just offer the option for users to use any image on the web as a a sprite. So, if someone decides to upload the HD sprites somewhere on the web, there is not much I can do about it.

Oh shit yeah, a 2.5D Cave Story engine. But why're you using textures from a Minecraft texture pack?
EDIT: that video you posted is private.

Sorry, this is fixed now. BTW, the video has a terrible framerate, because i converted it from gif to webm and then uploaded it. I will upload a new updated one soon. Maybe I will add a bit of a commentary on how this works, and how to use it.
The minecraft textures are just for development. as you can see, there is a screenshot where I used the mimiga village textures (this one)

Spoiler

those minecraft textures just allowed for a bit more creative freedom while I made some test levels. But really you can use any texture for you level, doesn't matter which one.
Here an example of two levels with different textures:

Spoiler

I dislike the background for this level though. I still need to work on this level and maybe add a sun object, that would definitely improve the ambiance of it (Or, that is what I hope haha)

And you can switch these textures on each level reload.

 

This is amazing. I love WebGL. I feel like there's some really cool stuff that could be done with it.

 

Hmm, this looks pretty sweet.

 

Looks interesting

 

Well they've been quite inactive, so.

haha, far from it!
I am just a single developer and still struggle with school. So this project is more of my hobby and i program on it like once ever 2 weeks.
Development is bound to be slow, but I promise you, it's still looking good
All I really need is a good story idea and other cool ideas or mechanics I could implement. That is all.

But thank you for telling me your concerns

 

Well they've been quite inactive, so.

> one month

 

Just wanted to make a quick update.
version 0.2 is out and many new things (especially guns) have been added, while some things have been removed (old menu) and others have been reworked from the ground up (parts of the physics).
i hope you enjoy the changes I made, if not, consider yourself lucky, for you can now edit the project as much as you like on the official github page.

Some tutorials will follow soon