Website URL

Twitter

Skype

Location

Interests

Hunt prehistoric creatures with your friends online. Build your own base, craft tools, and weapons to survive in a large-scale true cross-platform open world game.
This game is an application of the engine I’ve built, to prove a statement: It is POSSIBLE to build a 3D version of the Internet, where instead of browsing through websites, we could jump from one 3D space to the next. I “invite” everyone to make this happen. I want you guys to build your own 3D spaces implementing your own ideas what the web should look like in the future. We could just link them all together and make this Interconnected Virtual Space happen - yeah, the Metaverse, for the Snow Crash fans out there
Tech Details that I hope provokes further questions:
Loading Assets on Demand is even more important in the Browser than on PC or Console.
Internet speed is only a fraction of the speed of the hard drive. It is essential to only load whats visible if you want to provide an open world environment for users visiting your world the first time.
LOD - Level of Details allows Web Browsers to show something immediately for the users just like an ordinary website. It may look poor and users can see the object improving as they are loaded, still, I think its a good trade-off. Users get a good enough view of their environment instantly and can start interacting with it immediately.
Terrain and the Grid System
I’ve created the terrain in Blender, then I split it up like a chessboard automatically using Javascript. It is easy/cheap to determine that which cell contains the given coordinate and every single cell in the Grid has a reference to its neighbors. This is the basis of server layers of optimization when it comes to rendering, AI, and collision detection, etc. A recursive search is very easy to do, using those links to neighboring cells.
Lighting
I've implanted basic Directional and Ambient Lighting to support Day & Night Cycles and Point Lighting for individual light sources like a campfire, torch etc. To my surprise, the difficult part was to get good looking flames, thanks to the lack of Alpha Sorting in WebGL, what I had to implement in Javascript instead.
Animation
I animate my models in Blender, export them to “.dae". The file format comes with a serious limitation, you can’t define multiple animations and it only maintains a list of keyframes as references. So I maintain a JSON file per “.dae” to define multiple animations by having sets of keyframes. E.g.: “{running: [0, 4], jump: [5,7], ..}”. But I kept it simple and didn’t take it to the realm of animations per body part.
Physics
In short, I was stupid enough to write my own ..on the other hand, I have a fine level of control over how much I allow it to run. Again, on mobile, it is crucial to have that level of control to navigate 200+ creatures in real-time. I have two different type of Collision Detection. Collision with the Terrain and collision with other model surfaces. Terrain collision is very cheap, this allows me to move so many NPC at once. Collision with other models is heavier though, but that allows me to climb random looking rocks. I optimized it enough to make it feasible to run on mobile devices. I use a low poly version of the models to determine the collision and I only run it for the models near the Player, utilizing the Grid System I mentioned above.
AI
NPCs can navigate a random terrain, avoid obstacles and “see” and “hear” other NPCs if behind them. At the moment, they move rather robotically, but this allows me to calculate, where they can move next without hitting any obstacles and how long it will take to get there. I only run the AI right before they get to the target location. Basically, 200+ NPCs make only 40-100 AI calls per second. ..I certainly have room for improvement here
Multithreading in the browser is difficult but necessary to achieve good Frame Rate. Nothing but the rendering should be on the main thread ideally - Good luck to achieve it though I’ve managed to push most of the heavy logic into a speared thread, but AI is still running on the main one. In a thread you have very limited access to important functionalities of the browser, therefore, there is only so much you can do. Also, specific objects can only be passed by reference between threads, everything else has to be serialized on one end and deserialized on the other. You want to be careful how often you do it.
Audio
I use the Web Audio API that works as expected. On top of that, I implemented Audio Sprites: I compile all related sounds to a single mp3 file and that comes with a JSON object to define where certain audio snippets can be found. It's a fast, accurate and reliable solution unlike using Audio HTML Tag, but that one has its own use cases as well, e.g.: streaming an mp3 file comes for free, like streaming an internet radio station.
Multiplayer - I use WebRTC and not WebSockets - I know, I know, hear me out. The idea was that COOP is a very likely scenario and players may only prefer the company of their friends. I that case, they don’t have to purchase access to a private server, as long as they are happy to let their world go dormant between gaming sessions. Plus, all the logic is implemented for single player mode on the client-side, which logic has to be duplicated on the servers, if I went down the WebSockets rout - just think about where the AI logic should be, server- or client side. I expect this one to be a controversial decision, ..sometimes even I'm not sure whether this was the “right" decision There is a whole lot more to this though. Resources could be distributed between players when it comes to AI to ease the load on the Host - I know it is a potential security issue, but there is a use case for it, like AI for distant NPCs in COOP as long as you have no hacker friends ..this could be crucial on mobile devices.
Controller Support
The Gamepad API provides you with raw access to every button and joystick. You certainly have to implement your own layer on top of that. Events for pressing/holding down buttons don't come out of the box. Implementation of the dead zone of joysticks is missing and it is inconsistent how you can access different types of controllers through the API, even the same controller but on different devices. In the end, you will have to provide a controller mapping implementation as well in your settings. But its totally doable and works like a charm.
Touchscreen Support
It's a tricky one. As I mentioned above, on iPhones its completely useless till Apple decides to comply with Web Standards. Even on Android, it is a bit tricky: For the UI you probably want to use HTML. It makes sense because it comes with all the neat features that make our lives easier until you realize that you can’t switch between weapons while running - wait, what? You see, while you are holding down the left side of the screen to maintain speed and try to click on a button, or any HTML element to switch weapons, the click event won’t fire. No click event will be fired while doing multi-touching. As a result, HTML and any fancy framework for that matter are no longer good enough solution own their own.
UI
When it comes to games we expect a whole lot more from the UI than on a website. Multi-touch support - as discussed above and even controller support is not as straightforward as you might think. You have raw access to the controller, so when a button is selected and the user pushes the joystick diagonally upward, you have no idea what is in that direction, therefore what should be selected next. You have to implement the navigation of your UI with a controller for yourself. And you need controller support because that's the only way to move around in VR and on consoles. Speaking of VR, you want to render your UI twice in VR - once for the right eye and once for the left eye - and only once when not in VR, just something to keep in mind Also, rendering the UI could be heavy. This might be a surprise but if you think about it, on a website you don’t do anything but the UI, so you have a lot mere leeway to work with, whereas in a game you don’t want the UI to impact the Frame Rate, so it has to be very lightweight and probably you want Scheduling to have a final say on what gets refreshed. Taking all this into account, I really don’t see how any framework could be a good option - they were simply designed with different requirements in mind and there is more downside to using any of them than upside.
Precomputed Scene Occlusion Culling using a Grid System
Most of the optimization is happening real-time or triggered on a regular basis while running the game with one exception: I render every cell in the Grid System from the point of view of every single other Cell. E.g.: Cell A can see cell B and C but not D. I literally diff two images with javascript to determine whether the given cube can be seen or not. Then I record the results in a JSON file, which is used for rendering. This reduces the number of cubes to be rendered significantly, but it takes about 40 hours to run this optimization for the whole terrain.
Running the game on Mobile Devices
iPhone runs WebGL significantly better than top-end Android devices but practically useless because Apple ignores important web standards. E.g.: Pinch zoom can’t be blocked, therefore when you use your left thumb to move around and right thumb to look around, instead of doing so you end up zooming back and forth the screen. It also doesn't support fullscreen mode - video does, but not the canvas element. Another interesting limitation on iPhone is that you can only have 25 elements in an array in GLSL, which translates to having only 25 bones in an animated model. This doesn't make animation impossible, but you can’t use most animated models that you buy in the stores, you have to do it again with only 25 bones.
Profiling
“What gets measured, gets managed”. The built-in profiler in Chrome certainly has its use-case, but not good enough for what we want, so probably you will have to build your own at some point with specific features. You want to know how long a certain section of your game runs per frame, e.g.: Rendering, AI, Physics, etc. and probably these sections won’t run sequentially, but they are interrupted by other processes that you don’t want to include into the specific measurement. One thing is for sure, you cant do optimization without identifying the source of the lags. - I've certainly wasted enough time trying
Scheduling
As long as you are pushing the limits of the devices it is always a battle for a smooth frame rate. Therefore, you have to implement a scheduling system to manage what is allowed to run and for how long. E.g.: whatever is loaded and processed in the background will have an effect on the frame rate even if it is running on a different thread, you want to throttle that. You don’t want to set variables through WebGL API unnecessarily. AI always varies how much calculations it has to do depending on the number of unique encounters of 200+ NPCs in a random environment. Basically, you will have to limit what runs and how long, manage what is a nice to have calculation and a game-breaking one and try to make it seamless for the user.
Probably every single topic above deserves a dedicated post, so please feel free to ask anything - there is no stupid question - then I would like to use those questions to write an in-depth post on every single topic that helps fellow devs to overcome similar obstacles - no doubt I will learn a thing or two in the process
Live Tech Demo is available on https://plainsofvr.com

Hi, I've gone through the stuff on skeleton animations on the babylon docs, virtually all examples involve some form of scene.registerBeforeRender or scene.registerAfterRender stuff. I would like to make an humanoid character, say, pathfind and start walking from A and then stopping automatically at B. So, the usual way to do it in C# or other languages is to have the character be at rest pose at A, blend into walk pose and then blend into rest pose at B with the waypoints given. I found that babylon scene.registerBefore/AfterRender calls will not run when the browser tab is not active. So I could have my AI start walking, tab out and then to tab back after a few minutes to find that it hadn't left Point A yet.
I'm new to animating characters on the web and tried to solve it in the PG (with the dude) but can't seem to animate his position without pausing when browser tab is not active. How should I go about solving this issue ?

Video:
YouTube
Update: Big thanks to Freank from indiexpo.com who helped me completely rework the graphics! Let me know what you think! I think it makes a big difference. Also, local multiplayer was added.
Hello HTML5GameDevs! Htmlhigh5.com is back with another game after a long time! This time with a puzzle/strategy game. I recently got second place in a rather large AI programming challenge, and I decided to make a game out of the challenge! I did have to dumb down the bot so it is beatable though. Let me know what you think!
Play Here: Tower Capture

Hello Everyone,
I've been trying to go at this on my own but I've been stuck for days trying to add some basic AI to a cube.
Play the FPS style game here on desktop or mobile: https://xtreemze.github.io/Ballistic you can find the full JavaScript here: https://github.com/xtreemze/Ballistic/blob/master/js/master.js
Controls: touch the cube button on the bottom to shoot ice cubes and use standard universal camera controls to move and look around.
Here's where I'm stuck:
I got window.cube to jump and look at the camera but now I need a force to push the window.cube to move towards window.camera. I just can't figure out how to setLinearVelocity in the local forward direction of window.cube.
redMesh is the Mesh of window.cube and redCube is the impostor of redMesh.
(Also would be nice if the lookAt() rotation was eased or slowed down so it wouldn't seem so sudden but that's a lower priority.)
Here's the part of the code that controls the cube AI and thanks in advance for taking a shot at this!
// Global Scope Declarations for Console Tests
window.button = button;
window.cube = redCube;
window.cubeMesh = redMesh;
window.camera = camera;
// Red Cube turns to look at camera
const rotateCube = function rotateCube() {
redMesh.lookAt(camera.position);
};
// Cube Movement towards Camera ???
const jump = new BABYLON.Vector3(0, 5, 0);
const front = new BABYLON.Vector3(0, -10, 0);
const goForward = redMesh.getDirection(front);
const moveCube = function moveCube() {
redCube.setLinearVelocity(jump);
rotateCube();
// redCube.setLinearVelocity(goForward);
};
window.setInterval(moveCube, 2000);

Twitter - Subreddit - Dev Blog - Discord
Hello my name is Sam, I'm also the lead artist for Super Combat Squadron. We're a small indie dev team trying to put out a lightweight browser RTS. It's been just myself and one other programmer been developing the game for about a year now but, due to unforeseen circumstances, the lead programmer has had to take a step away from the project for personal reasons. I'm still in contact with him for help in the transitionary period but I'm looking to replace him on the team with some new programmers.
Currently we just completed our first internal playtest and got some good feedback from that, and the roadmap for the future was to push towards the first public demo, and then if the feedback looks good and things work out, were considering running a Kickstarter or other crowdfunding attempt to get the funding to take the game further.
The ideal skill set we're looking for would include:
Phaser and JavaScript (goes without saying).
A previous title or some example of your work with Phaser.
Possessing a strong focus on:
Networking
Pathfinding
AI
Loves and plays RTS or MOBA games a bonus.
Your position in all this would be helping tackle some bugs and featured we identified and fixing some issues blocking a public demo release. We're trying to cut the fat and make it purely a bee-line to public demo release. As previously mentioned, I'd love for it to transition into a longstanding paying role through crowdfunding, worst case scenario we stop at public demo release if the interest just isn't there.
If you are interested, you can contact me here, or at our email address: laxvikinggames@gmail.com

Hello everyone,
I'm developing an AI-focused book for Phaser similar to this one, but a shorter (more like a Handbook, instead).
However, some of the techniques and patterns that Phaser makes me use have given me the idea of probably expanding and improving these ideas and convert them into a Plug-in, or work directly on the Phaser repository in order to have a basic AI module similar to arcade physics in terms of scope (keep things really simple, yet functional and friendly to developers).
Would you be interested in supporting this work via IndieGoGo?
If so, would you rather have the book, the component, both?
I was thinking in working on the Phaser AI module as a stretch goal from the book, so later the whole community can benefit from it.
Looking forward to hearing from you.

I'm trying to make a 2d space game involving a sort of space dogfight between the player and some ai bots.
I need help with the enemy ship automatically rotating towards the player, but not being exactly pointed towards the ship 24/7. I want the enemy ship to have some "lag" in its response to the player's movement so it's more realistic.
Right now I have a model which is not realistic and would probably be too hard for the player to win:
update: function(){
//blah blah
var tempAngle = Math.atan2(fightSprites.player.y-fightSprites.enemy[i].y, fightSprites.player.x - fightSprites.enemy[i].x); //gets angle between player and enemy
fightSprites.enemy[i].body.rotation = tempAngle + (3.141/2); //too precise
}

Alright, been stuck on this for a few days and starting to think I'm overlooking a very simple solution.
I have a character that I want to walk back and forth on the screen. He needs to walk to one edge, turn around, then walk to the other edge, again turn, walk, etc.; rinse and repeat.
I've tried simply '+=' and '-=' on his x coord with an if statement but he wont seem to walk in the other direction. Example, writing 'steve.x += 1;' then 'steve.x -= 1;' won't work. He gets to one edge but then stops.
I've also tried using tweens but he seems to become jittery as he's a spritesheet already, maybe? His physics body will stay, but the pixels themselves seem to move outOfBounds.
Anyway, here's the full code for what I'm working on, any help is greatly appreciated.
http://pastebin.com/V0GM7z3w
Also still learning Phaser so any feedback on code flow is helpful too! Thanks!

Hi,
Recently, I was working on this artificial neural network that read emotion from human drawing in real time.
Here is an interactive demo link.
http://www.enteractive.space/alice/
It evolves everyday.
You can also teach her, currently over 10,000 people have their drawings to teach her.
I made a small library of it.
http://www.enteractive.space/alice-gallery/

Hi everybody,
I have another question for the brain trust. I am working on a plane game. I am able to control my plane perfectly fine and I have replicated the plane class to create enemy planes. The question I have is what is the best way to efficiently create a simple AI system for the enemy planes?
Here is what I was thinking:
I attached a screen shot of a plane with some lines to demonstrate what I was thinking. There would actually be 9 lines total but I am showing on 3 lines. If I detect an "obstacle" mesh via the right rays, then I would have the plane move left and conversely for the opposite. If I detect an "player" mesh on any of the rays, then I would rotate and fly towards the plane.
I have played with simple line meshes to do the same thing but I was worried it could be less efficient if I had a large collection of obstacles and players objects to loop through to detect a collision.
Any thoughts would be greatly appreciated!

Crajsh is a simple game we made back in early 2011.
I remember getting the sound to work, the GC not to pause, and the canvas to go fast enough was a bit of a challenge (Firefox was at version 3.6).
Play it: http://www.gamesfrommars.fr/crajsh

I am currently building the AI for some baddies in a simple video game I'm making. The levels are mostly horizontal with some floating platforms here and there. Using `enemy.state` as an attribute to keep track of what the enemy is doing and by tracking the x and y distances between the player and the baddies, I am able to create a semi-working AI system. But there are still glitches. For example: if the baddie is on a hovering platform and the player is directly below that platform, the baddies doesn't know to walk off the platform to get to the player. Are there ways to create "rays", like with Unity? Essentially, a "ray" is an orb that surrounds the object and detects its relation to other things around it. This way the object can navigate levels in a human-like way. Anything along those lines, or any AI tips and techniques/tutorials would be greatly appreciated!

This board game is available online: http://othellogame.net/revello My focus was on the computer AI. This game has five computer opponents and the champions mode is very powerful, but it's responding fast without making long calculations for the next move! Actually I wanted to develop this game for iOS only, but then I discovered the JavaScriptCore Library by Apple. I was exited, because my JavaScript code in this project works a lot faster than other Othello engines written in C. And the best of all: it can also be used for other platforms! This game is also optimized for mobile devices and I tried my best to create a polished design.

Hi, yesterday i was struggling with rotation of an enemy. In my game you drive a spaceship and the enemies should rotate to your location in the nearest way (left or right), so they can follow you. This seems to be simple, but i find some problems in the rotation degrees. First i have to find the angle that the enemy should have, to point to my spaceship. I find two ways to do it. The first doesn't work: angle = game.physics.arcade.angleBetween( this , player ); // returns angles between something like 3.1 and -3.1// ( this = Enemy class )I don't know why. Maybe because i am using p2 physics and not arcade? The second works: angleRadians = Math.atan2(this.position.y - player.position.y, this.position.x - player.position.x);angle = Math.atan2(this.position.y - player.position.y, this.position.x - player.position.x) * 180 / Math.PI;// returns 180 to -180So i use that instead. Here I find something strange, the 0° angle in the Enemy is on Top. But, the 0° angle returned in the var angle is on the left. ( both ways in clockwise ) Finally i try doing something tricky like this, but doesn't work properly: if( this.body.angle+180 - angle-90 <= 180 && this.body.angle+180 - angle-90 >= 0 ){ this.body.angle += .6;}else{ this.body.angle -= .6;} May if I figure out why the degrees are different, i can get it work. Thanks!

Hey everyone! I'm making a top-down game with waves, but the problem is the enemy AI. As it stands now the enemy rotates and goes towards the player, but when they all go after the player they come close to each other and it looks silly, like this: The thing is that I want the enemies to avoid eachother so they don't collide. If anybody knows how to do this, help is really appreciated! this is my code for their behavior: enemy1Group.forEachAlive(function (enemy) { enemy.body.rotation += 20, enemy.body.collideWorldBounds = true, enemy.body.velocity.x = 0, enemy.body.velocity.y = 0, chasePlayer(enemy); ; }) function chasePlayer(enemy) { if (player.alive) { game.physics.arcade.moveToObject(enemy, player, 150); } }

I'm trying to add some movement to the enemies in my game, I have a function which includes the following: var enemyMovement = game.add.tween(this.enemies.children[0]); enemyMovement.to({x: 230}, 1000, Phaser.Easing.Linear.None) .to({x: 50}, 1000, Phaser.Easing.Linear.None) start(); I have two problems: 1. I want the sprite to move at a constant speed, at the moment there is easing which I thought Phaser,Easing.Linear.None would handle. 2. The chaining will not work, the sprite will not move back and I have not idea why, I am getting no errors in my code. Thanks

I have a group of enemies in a project i'm working on, I want them to move independent from one another, I can do this, but the animations are playing up. There is easing even though I have set it so there shouldnt be, also whatever I do the tween wont yoyo, repeat etc. Chaining is also not working, here is an example of what i'm doing: var enemyOne = this.enemies.children[0]; game.add.tween(enemyOne).to({x: 220}, 50, Phaser.Easing.Linear.None, true, 0, 0, true); What am I doing wrong, shouldnt this line make the enemy return back to its original position? Thanks

The AI Tree Plugin for Kiwi.js allows you to create powerful, easy-to-understand behaviour trees to drive intelligent behaviours on your game entities using behaviour trees. Behaviour trees are great for quickly developing sophisticated behaviours... Curious? Read more and see examples @ Kiwi.js

AI enemies do things from time to time, etc ... It is time in my game, I have to create enemies. I do not know how to deal with the issue, I would like you to tell me some options there. How to make the enemy walk to the left and to the right, jump from time to time, etc .... that sort of thing. Thanks!!

Hi! today my last game became "playable" You can find it here : http://www.arlefreak.com/games/8puzzle/play/ To play use the arrow keys And the source code: https://github.com/Arlefreak/Phaser-8-puzzle-game Currently its using Phaser 2.0.2 It is an attempt to improve my JS and AI skills, the objective is to get the right order of the numbers, I used A* algorithm to find the answer, at the moment you can see the progression opening the console and hiting the arrow button. I will really appreciate if someone could tell me any feedback on my JS or AI skills based on the code or any feedback actually When I implement the solving animation will update this

Hi all, today y manage to make my little AI exercise to work, it's a classical path finding exercise using A* to solve, this is my first JS medium/heavy project and it can be improved A LOT mainly because I did the A star thing myself from scratch which was fun but hard. It needs some cool animations and player control improvements but if you run it and open the console you can see all the steps to solve it when I'm finished it will be on my website but for the time being here is the source code. If any one could check it out and tel me if something could get improved i will appreciate it a lot I have being studding JS and checking other people code and I think I did good practices but I'm not sure. (I'ts SLOW so if you run it it may look like it will crash but hang on and it will solve the puzzle , I think this is because my heuristic isn't the best but i will try different one soon) If someone is interested o could do a tutorial for this so let me know.