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

Apr 18, 2017 at 11:45 PM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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
p358227-0-s8ludza.png
p358227-1-ppqjuaz.png
p358227-2-xvq2goy.png

p358227-3-ysmkkau.png

p358227-4-u92mil1.png

p358227-5-ac0zjxj.png

older images
p358227-6-hg0egm7.png

Videos

Leveleditor / how to make your own levels
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
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:
p358227-7-nyydke7.png
or
p358227-8-iq94pnu.png
(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:
Code:
{
    "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

Will follow shortly

todo
- 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
- help remake the music / get permission to use remade music
- remake objects found in CaveStory as 3D Models

Update Log
- 29.06.2017 BETA 0.2.2 released
- 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
- 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
- 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
- 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
- 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]
 
Last edited:
Apr 18, 2017 at 11:54 PM
Neophyte Member
"Fresh from the Bakery"
Join Date: Nov 12, 2016
Location:
Posts: 7
Oh my god


This is actually cool
 
Apr 19, 2017 at 12:04 AM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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.
 
Apr 19, 2017 at 12:05 AM
Neophyte Member
"Fresh from the Bakery"
Join Date: Nov 12, 2016
Location:
Posts: 7
Is it also possible to put in your own custom characters

if you do 2d

Just wondering
 
Apr 19, 2017 at 12:49 AM
In my body, in my head
Forum Moderator
"Life begins and ends with Nu."
Join Date: Aug 28, 2009
Location: The Purple Zone
Posts: 5998
you should probably not use commercial assets for this
 
Apr 19, 2017 at 12:49 AM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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
p358234-0-lsmqa8u.png

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).
 
Apr 19, 2017 at 12:51 AM
Neophyte Member
"Fresh from the Bakery"
Join Date: Nov 12, 2016
Location:
Posts: 7
what format? (like PNG, BMP, JPG, etc. )
 
Apr 19, 2017 at 12:51 AM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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.
 
Apr 19, 2017 at 12:52 AM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
Apr 19, 2017 at 4:47 AM
Administrator
Forum Administrator
"Life begins and ends with Nu."
Join Date: Jul 15, 2007
Location: Australia
Posts: 6211
Age: 38
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.
 
Last edited:
Apr 19, 2017 at 1:43 PM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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)
p358227-3-ysmkkau.png
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:
p358266-1-eweuobo.png

p358266-2-ummu9o1.png

p358227-3-ysmkkau.png

p358266-4-sasm1nq.png
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.
 
Last edited:
Apr 26, 2017 at 2:56 PM
Senior Member
"I, Ikachan. The Life and Documentary of the OrigiNAL SQuiD."
Join Date: Nov 23, 2015
Location: Minnesota (aka Frozen Hell)
Posts: 162
Age: 22
This is amazing. I love WebGL. I feel like there's some really cool stuff that could be done with it.
 
May 23, 2017 at 4:50 AM
Hoxtilicious
"Life begins and ends with Nu."
Join Date: Dec 30, 2005
Location: Germany
Posts: 3218
Age: 32
Hmm, this looks pretty sweet.
 
May 24, 2017 at 5:48 PM
Senior Member
"Fly, Fly, Fly!"
Join Date: Jun 8, 2012
Location: CHRISTMAS stuff in August. WTF.
Posts: 145
Age: 27
Looks interesting
 
May 25, 2017 at 11:18 AM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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
 
Jun 5, 2017 at 6:41 PM
Senior Member
"Master using it, and you can have this!"
Join Date: Jul 30, 2012
Location: Germany
Posts: 74
Age: 24
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 ;)
 
Top