I still say the process as a whole is one of the weaker points of THREE.js at this point, but the animation system is becoming a little bit clearer to me. I managed to get my guy running around (still with the horrible running animation) and he jumps when you press the space bar. The running animation only triggers if the player is actually moving, so pressing ‘w’, ‘a’, ‘s’, or ‘d’. The jumping animation will play whether the player is moving or not and you can’t jump again if a jump animation is currently in progress. The jumping action is animation only, so there’s no way to jump “on top” of anything right now, you know, without any sort of collision detection. All in all it’s pretty bad right now, but it’s a reasonable placeholder for better animations in the future. Now I’ll make a sword attack animation and trigger it with left mouse clicks, then start working on getting some nasty little piggies running around Penrith Forest.
Planning and Development
Animation update
Planning and DevelopmentEven though the documentation is a little thin, I managed to get some animations in Lyridia. Now when you press any key the game plays an absolutely horrible run cycle animation. When you release all keys, it stops. Again, the animation is absolutely horrific at the moment. This is on purpose just to force myself to spend zero time on polishing at this point. It’s just not needed. The functionality, and the ability to polish later, are the important bits. Still want to do that tutorial on animation because I’m getting just a bit of jitter in the animation itself. I know this can be resolved, and I’m hoping that the digging required to write a decent tutorial on this stuff will reveal the underlying issue.
Animation is a nightmare
Planning and DevelopmentIt turns out the THREE.js animation system is a total nightmare. Hopefully I’ll look back on this fondly in a few months and think, “What a fool I was. The animation system is actually very powerful and really simple!” For now, though, it’s rough. The primary issue is that this very, very brief overview of the system is the only real up to date information I can find online about the it. The animation system in THREE.js changed radically somewhere around r69 or r70 so there is some information about the old system, but that really does me no good. I think that the best thing here is to just write my own tutorial covering everything from exporting a mesh from Blender to running specific clips in a scene. Writing a tutorial will force me to understand the system a little better, and also hopefully create a resource for others who might be struggling with this, so keep your eyes open for that over the next several days.
Animations
Planning and DevelopmentNext up is animations. Once I have the player using a basic walk cycle and, hopefully, a simple sword attack animation, I’ll release a new version. This will take me some time because I’ll need to familiarize myself with the animation system in THREE.js and create the actual animations in Blender. Since I’m very much an amateur modeler and animator, the process may be slow. But, once that is done I can focus on enemies. Specifically, having enemies that walk around in a semi-random pattern within defined regions and react when a player attacks them.
Dancing piggies
Planning and DevelopmentScreen capture software and I apparently don’t mix so you’ll have to take my word for it from a still image, but this is fun:
What you can’t see is that those pigs are in a staggered line and they are moving in a preset pattern across a small part of the world. The only reason this is cool is that their movement is control by … wait for it … THE SERVER! So everyone connected sees the piggies move in exactly the same way at exactly the same time, which is awesome. This is, hopefully, the very beginning of having enemies controlled by the server that players can actually interact with. Fun stuff.
Multiplayer!
Planning and DevelopmentIt’s back!
Fortunately I saved all the code from when I had basic multiplayer support using BabylonJS. It took a bit of minor tweaking but nothing really very serious. Fortunately all of the Node stuff didn’t change at all. I’m not leaving the Node server running when I’m not actively working on the development, so you can’t technically do this right now, but when the server is running an unlimited number of players can connect and watch each other walk around on the terrain. Pretty exciting stuff. I did this because I want to get a few boars running around and that requires the Node server. It will be really cool to have multiple browsers running simultaneously, each just watching some boars wander about aimlessly. So cool.
Art style
Planning and DevelopmentI’ve been having a bit of an existential crisis over textures in the game. I made a model of a crate with some textures from opengameart.org (which is fantastic, by the way) and loaded it into Penrith Forest. It looks good and really wasn’t difficult to export from Blender or load into my scene. Since using textures is definitely a technical possibility I’m willing to concede that I will probably eventually move away from the materials-only low poly style. That being said, there’s no reason to freak out about it right now. Once the game is much more deeply developed I plan on giving players the ability to submit art work for inclusion in the game so maybe at that point I can bring in some artists with some actual talent for creating assets using textures. For now, though, I’m sticking with my simple style and I’ll just brighten the fur material on my test boar so I can see him a bit better. Crisis averted, for now.
Beginning with enemies
Planning and DevelopmentI thought I would start on implementing enemies and a battle system. To do that I needed an enemy to work with. Staying in line with standard MMORPG tradition, I decide to make a boar. Look at this adorable fella:
Full disclosure, he kind of looks more like a bulldog than a boar, and it has creepy human eyebrows that I’m not sure why I made, but I’m an amateur 3D modeler, so cut me some slack. It can always be improved later.
Anyway, I stuck one in Penrith Forest just to get a look at it in the game and now I’m worried. One of my starting goals was to creating everything in Lyridia without textures. There are several reasons for this. It makes asset creation simpler, it make asset exporting simpler, and it keeps the file sizes for the assets very small. The boar model has around 600 triangles and the exported .json file is 40KB. That’s tiny, which is great, but I’m worried that I’ll never be able to get my assets to look very good without textures. Things like eyes, fur, dirt, scars, etc., etc., may just be impossible to create convincingly without textures. The thing about all this is that I’m not an evangelist for a particular art style. I wasn’t interested in using only materials because I have a vested interest in not using textures. The bandwidth and rendering efficiency was my only concern. If, however, I can use textures and still keep my file sizes small I’m all for it. I guess I just really need to do some testing to see how difficult it is to use textures in my assets and keep everything straight, and how much larger the required files will be.
Basic user interaction
Planning and DevelopmentI’m working on the very basics of letting users interact with the world and I’ve started with the cursor highlighting objects in the world. You can only highlight an object if it’s in the correct group, and if the camera is close enough to it. The guy in the yellow shirt is highlighted here:
It’s not perfect but it’s a start on letting users select and interact with NPCs.
Windowed mode
Planning and DevelopmentI’ve added the ability to run Lyridia in a “window.”
This is the game running at a resolution of 800×600. You can see on my under-powered test machine that the game hits about 30FPS (right now) by doing this. I can also scale the the game itself but it gets pretty garbled pretty quickly if you go below about 75%.
There’s obviously something about this I’m not getting right now, which is actually encouraging, because if I run the game at 800×600 then shrink the browser window down to remove the white space around the game display, I get this:
Notice the FPS is up to almost 60. I don’t know if the browser is wasting a bunch of resources clearing and redrawing the big white border in the first shot, or if it’s some other process I don’t understand, but in any case the game can, right now, be run at nearly 60FPS at a resolution of 800×600 on my terrible test machine and that’s exciting.