Felipe

Hi Rojoss, I believe most of Unity's WebGL games don't work well is because they use emscripten to compile C++ to asm.js and that might bring a lot of issues when dealing with cross browser support, specially if the browser is not optimized to handle it. For example Firefox runs asm.js programs pretty good but others don't. I feel so far the best solution to have a robust UI cross browser is to implement it yourself using what every graphics API you choose to use (canvas or webgl). DOM based UI could display different in each browser around. For rendering I would definitely recommend WebGL since it's widely supported and allows for faster rendering of polygons. Honestly I would recommend building the rendering backend yourself. It'll give better control of what you want it would be tailor made to your own needs, also WebGL is not that complicated to get you can easily build a canvas type of API that runs 20x faster than native canvas. For debuggers, if you work with Chrome there is the DevTools which are pretty good and easy to use. Includes CPU and memory profilers. The newer version also include GPU profilers. Firefox have very similar tools too. If you choose to go with WebGL for rendering I would highly recommend using a plugin called WebGL Inspector. It gives a nice look into what gl calls are being made, how your vertex buffers look like, the gl state, etc. Personally I try not to over complicate my self. Don't make simple task more difficult for yourself just because it uses the latest or the coolest library or design pattern. Keep it simple, clean and fast. Regards, Felipe

Currently I don't think is a good idea doing GPGPU on WebGL game right now. It's true, calculating matrix transformations is super fast on the GPU and it's ideal for general purpose calculation, specially with compute shaders. The problem is that currently WebGL doesn't give any performance optimization when doing synchronization from device to host memory. It might be great for generating an immutable single block of data at initialization but not for executing GPU calculations every frame (updating meshes, calculating physics, etc). The main bottleneck you'll get is with glReadPixels. You can even try it with the gpu.rocks demo, try running that test while rendering a game. Maybe when the standard decides to add compute shaders and PBOs to webgl it could be possible.

Hi, I feel the first two points I mentioned should be appended to the last one, once you do the last one do the first two. What I mean about memory overhead is that probably for your current hardware pushing 10k triangles is too much. Also you are currently using 2 buffers, one for vertex position and the other for vertex color. What I suggest is putting both in the same buffer this would make the composition of your buffer something like: [x0, y0, argb0, x1, y1, argb1, ...]. This is how you could use a single vbo to store your vertex data (position and color) var VBO, aWorldCoordsLocation, aColorLocation; // vertexSize represents the size in bytes of your // attribute data. (float + float + (char * 4)) var vertexSize = (4 * 2) + (4); VBO = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, VBO); aWorldCoordsLocation = gl.getAttribLocation(program, 'aWorldCoords'); aColorLocation = gl.getAttribLocation(program, 'aColor'); gl.enableVertexAttribArray(aWorldCoordsLocation); gl.enableVertexAttribArray(aColorLocation); // Offset is 0 gl.vertexAttribPointer(aWorldCoordsLocation, 2, gl.FLOAT, false, vertexSize, 0); // Offset is 8 because the size of a vec2 in bytes is 8. gl.vertexAttribPointer(aColorLocation, 4, gl.FLOAT, true, vertexSize, 8); Cheers

GPU acceleration is great when you understand how to take advantage out of it. Things I think could help - Use and index buffer and put vertex attribute data in one single buffer. This way you can avoid switching between buffers. - If you are not updating buffers then use gl.STATIC_DRAW. - I think this is the most relevant for your test. Having a single draw call doesn't mean better performance. Split your triangles into reasonable batches and do multiple draw calls. Maybe limit the amount of triangles to 4000 or less. I feel the main issue with your example is memory overhead. You can look at the code of this tiny canvas implementation I did if you want some reference, it's not the fastest 2D renderer but it uses the stuff I mentioned: https://github.com/bitnenfer/tiny-canvas/blob/master/src/canvas.js Cheers.

Really nice tutorial. Thanks for sharing it! I've been using ECS for a while now and I really enjoy using it for large projects as it's very modular. One thing that I added to my own engine is that you can pass components to the entity contructor. Currently what I have is something like this: var bindFunc = function (func, object) { if (typeof func.bind === 'function') { return func.bind(object); } else { return function () { return func.apply(object, arguments); } } }, Entity = function () { var components = Array.prototype.slice.call(arguments), init = function () { components.forEach(function (component) { if (typeof component === 'function') { component(entity); } }); }, entity = { /*Have what ever you want here*/ }; init(); return entity; }, Component = function (name, properties) { return function (entity) { entity[name] = entity[name] || {}; Object.keys(properties).forEach(function (key) { if (typeof properties[key] === 'function') { entity[name][key] = bindFunc(properties[key], entity); } else { entity[name][key] = properties[key]; } }); return entity; }; };var Render = Component('render', { draw: function (graphics) { // draw stuff! } }), Position = Component('position', { x: 0, y: 0 }), myEntity = Entity(Render, Position);myEntity.render.draw(myGraphics);

The game is running on a different website and zibbo is using an iframe to run the game in their portal. What they are also doing is waiting for ad to be shown so they can load the needed sciprts asynchronously. If you look in the console you can find the softgames domain and see the scripts.

You could use closure. (function (scope) { // your code goes here. // if you want to leave something at the global scope scope.MyGlobalVariable = 'hi';}(window));

Thanks a lot for the comments. I understand that the enemy bullets going through walls could be annoying but without that the game would have been really easy. I guess I would have made life easier with a rate of fire that wasn't so invasive. Cheers!

EXTREME MINI MASSACRE http://js13kgames.com/entries/extreme-mini-massacre Hi everyone, I want to share with you this small game I created for the js13kgames compo. It's all about shooting like a crazy person. You can play using you keyboard + mouse or with an Xbox 360 controller. Cheers!

Hello everyone! I am very excited on showing the first game we've release as internal HTML5 game dev team at Spil Games. This game was made for GirlsGoGames. About: As the owner of a Jungle Hospital you must take care of the animals that check in. Where to play: http://www.girlsgogames.com/game/cute_jungle_hospital.html Cheers!

Hey guys, I want to share with you this small prototype i've been working on this past week. There is probably a lot of bugs but I plan on work on them during the weekend. The idea is basically matching 4 in a row. You play against an anonymous player. If you played connect 4 then you'll get it right away. Any feedbacks, comments and ideas on how could I improve it, are always welcomed. THE GAME LINK http://shin.cl/shonpon/online/ Cheers, Felipe.

I know it sounds a bit hacky but you could try linear interpolation. Have a static value for the velocity and when you are pressing the button leave the normal value for the interpolation to 1, when you stop pressing reduce the value (by for ex: 0.1) until it reaches 0. Then you'll have a smooth decreasing of the velocity until it stops.

Hello, I want to share with you the game I made, this weekend, for Flappy Jam. Sadly the music doesn't work properly. You can play the game here: http://dev.shin.cl/mrpew/html5 I've also released an android version, which can be downloaded here: https://play.google.com/store/apps/details?id=com.felipealfonso.mrpew Felipe

Hello everyone, I was wondering if it's possible to fill text and then stroke text on the outside ? I am having problems with the default way of just making the line width twice the size, stroke the text and finally fill it, but I get this: Thanks!

I use a macbook pro with sublime text for programming, photoshop cc for drawing, spine for animations, sourcetree for version control.

Monkey has to be one of my favorite languages / tool. Is so simple and fun to use. Really straight forward. I actually ported my js13k game to PS Vita with monkey, and it was very easy. Is sad that no one really got interested on it where I work. To be honest I hate the idea of "wrapping" my js code, I like to have access to the final source code at the end if I want to tweak it, that´s a reason why I didn´t like haXe that much either.

Hello I've been porting my js13k game to PSM which is running right now on PS Vita. If your game is kind of similar then I could help out. Here you can see a video: http://www.youtube.com/watch?v=yfMjbUzG4QE

Hey, I use this little snippet to get the current fps of my games. var fps = { startTime : 0, frameNumber : 0, getFPS : function(){ this.frameNumber++; var d = new Date().getTime(), currentTime = ( d - this.startTime ) / 1000, result = Math.floor( ( this.frameNumber / currentTime ) ); if( currentTime > 1 ){ this.startTime = new Date().getTime(); this.frameNumber = 0; } return result; } };You should call fps.getFPS() on your game loop. For example : var f = document.querySelector("#fps");function gameLoop(){ setTimeout( gameLoop,1000 / 60 ); f.innerHTML = fps.getFPS();}window.onload = gameLoop;

Hello guys, After getting the 4th place on the js13k compo. I decided to port my game to a not so common handheld. The PS Vita, at first I tried to find a way to just use JS source to run it on web, but performance was horrible. Even simple examples like this: http://dev.shin.cl/monster/ run really slow. My only solution was to code it from 0 and use a language that would help run my game natively. I chose Monkey which translates to c# and uses the framework needed by PSM to run games on the device. The result it's great! You can view a video of the game running on the psvita here: http://www.youtube.com/watch?v=yfMjbUzG4QE Greetings!

The console thing for the first example was just to mess around. The engine won't support that. After playing a bit more I made a new example ( only tested on chrome ). http://dev.shin.cl/asciiengine/exp2/webcam.html An ASCII Webcam.

Hello everyone, I want to share with you today a small personal project I am working on. After making this little ascii game-thing ( http://dev.shin.cl/asciishooter/ ). I decided I wanted to make a simple ASCII ( Game ) Engine. I still don't have a name, and it's very very limited in size and what it can do, for now. Right now it handles image to ASCII transformation, sprite-sheet animations, transform Context 2D to ASCII and draw simple primitives like rectangles and lines. Of course it's very limited in size, you can't work with huge canvas. Right now I've only tested on 100 x 50 px. Anyway here are some examples: Sprite Sheet: http://dev.shin.cl/asciiengine/ Stupid Test: http://dev.shin.cl/asciiengine/exp2/ Here you can get it and try it out: https://github.com/ilovepixel/PixelStab-ASCII-Engine Greetings, Felipe.

I would recommend researching on FSM ( Finite State Machine ). It's a great way handle states on a game, I've used them for a while and it's very helpful and let's you keep you code clean and away of multiple nested if and switch statements inside your main loop. The good thing about FSM is that you can implement it into any object allowing you to have nested state machines and also they are extremely simple to code.

I know, but I was saying that for if he wants to port his code to his own engine or other that doesn't use that inheritance system underneath.

Why not use prototype for inheritance ? It's really simple. For the touch events you could create your own "input manager" that checks when a touch event is triggered. After that check if the x and y coords are inside the bounding box of the element, if so then fire a custom event for that element.

Runs really great on ipod 5 and Samsung Galaxy S2 ( Chrome for Android , I never use default browser ). It's a fun game and very impressive on how much you've made with so little. Congrats! I've seen a lot of space games this time, that's good because I like them