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

Old topic!
The last post in this thread is over 60 days old. Posting in this thread will be considered a bump, so please make an attempt to be courteous if you go ahead with it.

If the last post is over 6 months old, it may instead be a better idea to start a new topic. If you aren't sure about what to do, feel free to ask a staff member for help, or try to locate a 'general questions'-type thread if it exists in this (sub-)forum.
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: 20
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




older images

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:
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:
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 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: 20
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: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: 6000
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: 20
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).
 
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: 20
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: 20
Apr 19, 2017 at 4:47 AM
Administrator
Forum Administrator
"Life begins and ends with Nu."
Join Date: Jul 15, 2007
Location: Australia
Posts: 6175
Age: 34
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 6:35 AM
Part-Time Perfectionist
CS Beta Content Discord Admin
"Bleep, Bloop, Bleep, Bloop"
Join Date: Dec 26, 2014
Location: the back of their own hand.
Posts: 1599
Age: 120
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.
 
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: 20
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)
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:



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: 18
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: 3217
Age: 28
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: 24
Looks interesting
 
May 24, 2017 at 6:03 PM
Part-Time Perfectionist
CS Beta Content Discord Admin
"Bleep, Bloop, Bleep, Bloop"
Join Date: Dec 26, 2014
Location: the back of their own hand.
Posts: 1599
Age: 120
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: 20
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: 20
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