Search the Community

For anyone too young to remember, back in the 1980s there was this thing called LCD games. Before Nintendo introduced the GameBoy, electronics companies including Nintendo were making small handheld toys that used LCD crystals to display flickering shapes, the shapes could only be turned on or off. Using this crude form of animation they were able to create something that kind of resembled a videogame. Companies incl. Gakken, Tandy, Radio Shack, Sunwing, Tiger, Tomy called these games "card game" or just electronic lcd game, while Nintendo called their line "Game & Watch". Over the years hundreds (maybe thousands) of different games were created, see this site: http://handheldempire.com/games.jsp Anyway, why do I bring this up here on html5gamedevs? There is this very cool site called pica-pic by Hipopotam. He's created playable versions of 26 of these games using Flash. -> http://www.pica-pic.com/ Now I was thinking, this could possibly also be done using with html/js right? Ideally there could be some sort of lcdgame.js library, and then for each separate game you'd have just one html file and a javascript to describe the gamelogic. And maybe only 2 png images, one image with and one without the shapes, and the LCD game library is then able to cut out the shapes (also described in the js file as polygons) and display it on a canvas. It could potentially be kind of like MAME but for LCD games. Any thought on this?

Hello! I have been working on a 3D rendering library built on top of PixiJS, and just want to find out if anyone would be interested to try it and give feedback. Pixi3D is a JavaScript library which makes it easy to render 3D graphics on the web. It works for both desktop and mobile web browsers and includes several components which makes it easy to create nice looking 3D scenes out-of-the-box: Load models from file or create procedural generated meshes Supports physically-based rendering (PBR) and image-based lighting (IBL) Transformation, morphing and skeletal animations Customized materials and shaders Built on top of the widely used PixiJS library which makes it simple to combine 2D and 3D You can go to https://pixi3d.org/demo/drone/ to view a real-time demo or visit https://github.com/jnsmalm/pixi3d to download and read more about it.

Hey everyone! I've been a lurker for a while, but joined up to shamelessly plug my new library I built for my own PIXI projects. Hopefully someone else will find it useful too. I wanted an unopinionated way to make isometric tilemaps from sprites of different sizes/depths, one that would play nice with PIXI ? and allow me to be super flexible at runtime without much overhead. Let me know if you have any feedback or find it useful at all! https://github.com/sammccord/iceoh Example page

Can anybody explain me why we have babylon.worker.js? What is differecnce betwee babylon.js? Greetings Ian

Hi! I did a Game Jam recently, our group used the p5 library because someone suggested it to us, and indeed it helped us develop an ok prototype in a short amount of time. The game wasn't perfect at all of course, because 48 hours is still really short, but one of the main flaws that bothered me was the graphic integration; our graphistes liked working with pixel art, and we used a tileset to create the background map, which didn't tile right, with grey line appearing between tiles; on top of that, the other sprites didn't look nice at high resolution either, because of linear filtering. After the Jam ended, I decided to try to fix these. I found the way to activate nearest filter in p5, which made the graphics look way better, but still not as nice as I wanted it to be. After googling a bit, I found this article, which was exactly what I was looking for. Then I noticed... in order to use shaders, I needed to switch the context to WebGL, which meant changing most of the code. This didn't actually bother me, so I started working on it, it was quite a nightmare (because of p5's bugs and lacks of integration...) but when I got to the point where I had basically the same game then before, but switched to a WebGL context (without the shaders), I noticed HUGE performance drops (I'm talking 10 FPS for displaying something 400 sprites in a 500 * 500 context!!!). That's when I decided that I needed to switch to a different library. A little more googling later, I opted for the PIXI library, which, I must agree, is a nice library to work with, even though the official documentation is lacking a bit of informations. I started recoding the game from scratch once again, and as soon as I could draw the map on screen, I tried to implement the pixel art shader; I copy-pasted the code and... Magic! It didn't work. I was actually not that surprised, and decided to play around with the GLSL to see where the problem was. That's when I started noticing strange things: weird texture offsets that I tried to adjust for manually, which didn't work because the offset changed depending on the scaling of the image... and then the texture itself, scaling itself up and down when I scaled the sprite... After a while and thanks to more googling, I found out that Pixi did some pre-processing on both the texture and the texture coordinates which were passed to the fragment shaders. I tried adjusting for it, I tried a lot, I got close, but it's still really messy, and float precision starts doing strange things that makes the textures look even worst then before. That's where I am now. I tried searching for others libraries, but most of them seemed to be either 3D libraries, or probably as weak as p5, so I'm here to ask, is there a good library that I can work with which won't bring me such problems? Or is there something I can do to fix my problem with PIXI? Or should I just resort to using webGL without any additional library (which at this point seems like the best solution to me)?

Hi there, Can anyone here point me in the direction of a Live2D tutorial or library that would work with Phaser? This seems like an interesting concept and I have not seen anyone try this yet to my knowledge. http://www.live2d.com/en/ https://avgjs.github.io/pixi-live2d-example/ Thanks in advance!

Hi, Since the problem took me over a week to figure out, here is my solution to bundle your project using web-pack keeping Babylon as a dependency. NB: I am not certain what are the NECESSARY steps (ie what I could simplify) but those are SUFFICIENT steps. My constraints were : The final bundle can be imported both in the browser and in node using any kind of import method : require(), import/export, or <script src=...> tags It has to protect against errors in node due to access to window or document that will be undefined BABYLON has to load has a global in the browser using the script tag (window.BABYLON) BABYLON needs to include Canvas2D BABYLON needs to remain external of the bundle so the custom library is light and in theory could load any version of BABYLON Solution to protect loading in node.js: Build a custom bundle on Babylon website with Canvas2D ONLY, un-minified, and WITHOUT OIMO OR HANDJS. I did not test all possibilities but since the bundle is a concatenation suppose to be web compatible only, the exports will break in webpack or node in general. But using only this custom version will produce bugs in node due to access to undefined window. Then I had to bundle this custom build using webpack, you can see the configuration of webpack and the builder.js here : https://github.com/albertbuchard/experiment-babylon-js.git The important thing here is how the builder checks for window being defined and the webpack config exporting your named library with UMD. Publish this bundle to NPM (in the github look at the package.json it has three scripts to produce a unminified version, a minified version, and publish the repo on npm) Those two steps will allow to load Babylon using any kind of import method, and do not produce errors in node (but returns an empty object, of course any call to BABYLON function will fail) Solution to keep Babylon as a dependency in your custom library: In your library npm install the-custom-babylon-we-just-built Import BABYLON in your scripts any way you want using this custom repo ( es6 import syntax will work <3 ) i.e import BABYLON from 'the-custom-babylon-we-just-built' Then take a look at the webpack config and builder.js of this repo to understand how to manage EXTERNALS: https://github.com/albertbuchard/Experiment.js The key element here is how you write your external array: externals: { ... lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, ... 'experiment-babylon-js': { commonjs: 'experiment-babylon-js', commonjs2: 'experiment-babylon-js', amd: 'experiment-babylon-js', root: 'BABYLON', }, ... 'experiment-babylon-js/lib/babylon.custom.js': { commonjs: 'experiment-babylon-js/lib/babylon.custom.js', commonjs2: 'experiment-babylon-js/lib/babylon.custom.js', amd: 'experiment-babylon-js/lib/babylon.custom.js', root: 'BABYLON', }, }, All but the root (Global environment reference) must be the NAME OF OUR MODULE as you would import it using require('NAME OF YOUR MODULE') so usually the name of your npm folder like the first two exaple, OR the direct path to the file you want to load like the third example. It has to be the same as the import names you are using in your library. So if you import babylon like so : // in your library const BABYLON = require('./path/to/babylon.js') // in your webpack config externals: { ... './path/to/babylon.js': { commonjs: './path/to/babylon.js', commonjs2: './path/to/babylon.js', amd: './path/to/babylon.js', root: 'BABYLON' } ... } Hope it will help some of you ! @Nikos123

Hey everyone, I'm one of the developers of Curve Fever which is a multiplayer snake game. Due to a complete redesign and performance/loading issues we plan to remake the game with HTML5 canvas. We've already done a little bit of research but I'm already noticing there are hundreds of options for everything. Reading through each option would first of all take a lot of time and secondly it's always advertised better than it is and it leaves out the downsides. I'm looking for some general advice and some advice on frameworks and tools to use. I have a few concerns and requirements listed below along with the information about our current project/setup. About the project The current game is made in Unity and exported to WebGL. However, 20% of the users are unable to load the game and 25% of the users that can load the game has FPS below 40. This is too high and we've had several talks with the developers that work on WebGL in Unity but they say that it's unlikely that it's gonna have massive improvements. Totally understandable because Unity is a massive engine and WebGL is mostly used for demos and such and not full games. Our game is a 2D topdown multiplayer snake game played by milions of users. The servers are custom made with Go(lang) and the communication is done with websockets using Protobuf messages. Most of the game is actually UI for things like chat, friends, shop, lobby, profile, popups and so on. Requirements These are the main requirements we have for our new setup. Exportable for standalone (Windows, MacOS and Linux) - Preferably with generic API's for native things. Exportable for Android and iOS - Preferably with generic API's for native things. Exportable for web portals and Facebook. Being able to run the game locally on Windows, MacOS & Linux. Great workflow for quick development and design. Structured code base (Typescript?) Easy for designers to create UI elements and such. Easy to create UI animations. (or animations in general) Rapid prototyping. Quick load times Good performance on multiple devices. Some kind of versioning would be great. It's also quite important that it's open source. Specific questions Here are some specific questions we have currently. We're mostly just looking for general advice on what to use and what not to use with the requirements we have. Is there something like Electron that also exports to mobile or do we have to use two services? Is it correct that it's best to create UI in the dom? If so, how well will it work with services that export the game? Since most of our game is UI would it be wiser to not use a game engine like Phaser? To give some more context, basically all we have to do in the game is render curves (lines) on the field. The curves will have to be erased too because of client side prediction (multiplayer networking). Is there something that lets us create UI elements easily with animations and such like it's done in Unity? I know that a lot can be done with HTML, CSS and JS but not all game designers may be experts with this and it'd be much easier if there was some sort of software where designers can design the game in. How good are the profilers/debuggers in the available engines? Or do people often only use the browser profiler/debugger? Just putting this here for people that only read these questions. What are some good practices and workflows. Would be great to hear what stack of tools and libraries etc people use and why.

Hi guys, I would like make a dos-look-style game using javascript. Can you suggest me what kind of library should I use? Tnx

Can anybody explain why is babylon.core.js and babylon.noworker.js for? Should I include it or is babylon.js, cannon.js and Oimo.js enough to include javascript in html file?

I was just wondering which Canvas/JS framework would best fit for building furniture simulator. I could technically build it with jQuery but I need something that will ease my work. Here is a screenshot I made: This is built with Flash but I need to build in JS. WHat do you think, would Phaser be best fit here? There is snap to objects, some spritesheet logic to simulate fake 3D and drag and drop elements to place. But yes it is for Canvas processing. The dashboard top would be html input fields I guess, even better if I could make them inside the canvas.

Hello everyone, I hope you had great holidays! I am back at work now and found these new materials very interesting. While implementing the new "sky material", I encountered the following error: File: /dist/babylon.skyMaterial.js this._effect = scene.getEngine().createEffect(shaderName, attribs, ["world", "viewProjection", "vFogInfos", "vFogColor", "pointSize", "vClipPlane", "luminance", "turbidity", "rayleigh", "mieCoefficient", "mieDirectionalG", "sunPosition" ], [], join, fallbacks, this.onCompiled, this.onError); } if (!this._effect.isReady()) { // <=== this._effect is null, therefore error "isReady of null" return false; } this._renderId = scene.getRenderId(); this._wasPreviouslyReady = true;this._effect.isReady() throws an error because this._effect is null. What's the problem here? Thanks Kevin

I need to provide the user with the ability to enter some text, click a button, execute an API call, and show the results on the screen. What are the options for some sort of user interface UI library to do the above, or am i better off doing it directly in Phaser? I tried EZGUI but it's a little confusing and bits are buggy at present (i've reported things in the issue queue to help). Any other alternatives I should check out ?

Hi everyone, I wanted to point everyone to two examples we just put online. They are part of the examples of a new free service named PlugPIN JS that we just launched. This service turns smartphones into remote controls for games, websites and apps. Here are the two links to the examples, both built with Threejs: 1. Simple Shooter http://surf.plugpin.com/apps/demo-walkthrough/ 2. Remote Controls with Gyro http://surf.plugpin.com/apps/demo-orientation/ The second example is fully documented under "onOrientationChange()" in the Docs. We hope you like it and that it sparks your creativity to make your games interactive by using your smartphone. If you have any questions concerning the examples or the JS Library, then please don't hesitate to contact us. We would love to hear what you think about it and how you would like to use it. Joost @ PlugPIN

CEWBS - Fast Voxels in Motion Github/Download: https://github.com/TriBlade9/CEWBSDemo: http://triblade9.wc.lt/CEWBS [Middle-click: grab/release mouse (Click in the center), F: fly/walk, Left-click: break voxel, Right-click: place voxel]CEWBS is a MIT-Licensed library for BabylonJS which provides a VoxelMesh object for creating optimized (greedy) voxel meshes. It currently provides methods to create, update, poll, color, and pick voxels. (See README.md) The goal is to separate voxel meshes from the world 'grid' by allowing them to be rotated, scaled, moved, affected by collisions, physics, and generally treated as normal meshes. while still letting them be manipulated and accessed easily. (In the demo, the voxel mesh you are standing on is rotating, along with it's children.) The speed of the mesher is such that you can create a fast animation (Changing the blocks every frame) in a 16x16x16 mesh with almost no impact on FPS. (Demonstrated in the demo) Textures, Ambient Occlusion, and per-voxel lighting are currently not supported due to the difficulty of implementing them alongside the meshers. Feel free to help out with those. Projects Using CEWBS: None, yet. Enjoy! Sorry for the rushed post, I'll flesh it out more later.

Hi, I'm new to HTML5 game development and I need help choosing a framework that best suits my needs. I'm trying to make a multiplayer card game that uses Facebook login to manage users. I've worked as a web designer for a few years now so I don't want to stray too far away from my comfort zone. I'm not very familiar with canvas. I'd like something that is lightweight and preferably uses SVG for graphics. I'd also like to do animations in CSS where possible because I'm familiar with it. Think: AngularJS for games? Thanks.

Do you know a good javascript particle library that is easy enough to integrate? It's one of those things you could program yourself easily, but it will still take time. I tried ParticleEmiterJs, a plugin someone made for CreativeJs, but it was really buggy. Any advice?

Hi, could someone please explain what a widget library is and where would you find the result of it on your game, or on whatever you're building? Thanks!

So, hello to everyone, I'm new here. I found this site, and figured it would be a great place to talk about what I'm trying to create. So, after developing my first game in HTML5/JS, I found too much boilerplate that I didn't like, as I'm sure we all have. The game is called Huoli Arcade. and it's a revised game I originally wrote in C about 1.5 years ago. You can check it out here: http://www.brooklyncodebits.com/index.php/software-games/158-huoli-arcade-2013-version After I was finished, I was (and still am) eager to start work on another arcade shoot em up game. However, I couldn't help but think that things would be easier to develop with (for me) if things were a little more down and dirty. Things like if the loop wasn't so annoying to create (unlike a simple do/while and vsync), or some of the time-eating scope lookup that JS has, or creating a nice fullscreen effect, or getting straight data from input without having to always rel on the even handlers, and other problems. Well, I started on a solution that gives a little more of a traditional game-programming feel. I'm calling it WebcadeJS, and it's specifically for 2D games. It will ease a lot of nonsense off the markup, but will still retain much of how you use the very direct HTML5-JS API. Working on it pretty well, and I'm hoping that maybe some people would also find it useful, too. It will handle: Page Setup Game Loop Display/Canvas (including fullscreen and stretched fullscreen modes, canvas & context will be direct HTML5/JS access) Input (Keyboard, Mouse, Touch and Joystick) Audio (via Audio element only as of right now, will be direct HTML5/JS access) Video (will be direct HTML5/JS access)

I've ported the Ash Framework to Javascript and it can be found on github at: http://brejep.github.io/ash-js/. Ash is a high-performance entity system framework for game development originally written in Actionscript 3. It organizes code in an interesting way that is reminiscent of data-driven programming. Those of you with backgrounds in Flash and Actionscript may know the Ash Framework already but more information can be found at http://www.ashframework.org/. There are a couple of good introductory articles there as well as links to other ports and demos. Hope this is useful to some of you. Cheers, Brett

rot.js is a set of JavaScript libraries, designed to help with a roguelike development in browser environment. http://ondras.github.com/rot.js/hp/

Hello, let me introduce you my new open-source library PolyK - http://polyk.ivank.net . It is written in pure JavaScript, without any bindings to DOM, CSS or anything else. It is a set of several functions, which take an array of numbers and process it. It my be useful for some games, but you can use it even for non-graphical computation. I have several ideas for games, which may use that library. I don't have a time to make them, but maybe you will you click on some button in the middle of labyrinth (polygon) and you have to get mouse cursor out without touching the polygon. (PolyK.ContainsPoint) using PolyK.ClosestEdge you can test intersection with polygon and circle. You can make balls bouncing inside the polygon and then a character, which should go throught the polygon avoiding those balls. You can make car racing. Real physical models (Box2D, Bullet) are usually bad for car racing. With PolyK you can make pseudo-physical model. If you attach Z coordinate to road points and interpolate it, you can make 3D racing with jumping above the road, just like Need for speed With raycasting, you can test visibility between 2 points throught polygon. You can make your secret agent character run through the map while avoiding guards. Using Slice function, you can do something like Fruit ninja, but with multiple slicing and much interesting shapes.