Search the Community

Hi everyone! I was wondering which HTML 5 game engine is better PixieJS or Phaser.io? Links: Phaser.io: https://phaser.io PixieJS: https://www.pixijs.com

If you need a real tutorial you can have it for free with Gdevelop. You have to pay for some lessons on Phaser on the other hand. It nedds no coding. It has full potency. You can publish on android. It is free. Has many tutorials MIT created it!!!

Hi. I glad to introduce you a new game that was created by our team - it's called Arcade Race and it's a simple racing game where you need to go from checkpoint to checkpoint trying to do it in short time. It's a 3d game but made in old pixel game style like Interstate76 or first Carmagedon . Please don't judge it seriously it's just a fan art inspired by old games. It works directly in browser and mobile devices with friendly controlls. Enjoy. It was made using Verge3D engine in Blender with help of Inkscape and Gimp. Here's a link to the game And some screenshots

Hi! I'm a developer from Argentina and I just released a visual novel engine based on Phaser and inspired by Ren'Py, called RenJS. The stories are written in yaml on a list of actions, and then interpreted and executed with Javascript and Phaser. It's easy to use by non programmers and it's super easy to extend and modify for anyone that knows a bit of phaser. I invite you to check the tutorial game I made with the engine itself in https://lunafromthemoon.itch.io/renjs, you can also get the code from https://gitlab.com/lunafromthemoon/RenJSTutorial, download it, play it locally and grab the files to make your own visual novels. There's no official documentation of it yet, but I'm working on it. I hope to get some feedback from you all, thank you!

Hi devs, yesterday, I was reading about the OffscreenCanvas (https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) and found one cool demo at https://developers.google.com/web/updates/2018/08/offscreen-canvas; Then I decided to give it a go by creating https://codepen.io/anon/pen/ReEGxp, but the engine fails to initialise at the worker thread reason- "window not found !" ; Is there any way by which I can bypass this check ? I tried passing canvas context but no results ! It is supported by Three.js.. so I guess, shouldn't be an unknown area to explore

This is the order in which the cameras (relevant to me) extend each other, but also often override each other: UniversalCamera extends TouchCamera extends FreeCamera extends TargetCamera [extends Camera.] How come FreeCamera doesn't use rotationQauternion and allow rotation around its Z (roll) axis by default? After all, TargetCamera does use quaternions, even though it ignores the Z axis by design. But a FreeCamera should be that much free, right? Wrong? I saw that FreeCamera abstracts its inputs. It would make sense for the mouse input to use quaternions for full freedom of rotation in all axis. Desu ne? I'm itching to make a pull request that, while keeping backwards compatibility, adds more freedom to rotation (Z axis roll) and movement (QE for In/Out.) But I'm new, so I don't want to code stuff and then get denied. Visualization aid:

Since GODOT does everything that Phaser does but with greater facilitaton as well as more quickly and with great easiness and much much less effort blood and tears. Why to use phaser any more?

Hey! I want to create a game thats can run on as many platforms natively. So being a front-end developer i turned to webGL. But i have a few questions: 1 ) Is possible to create big complex and demanding games like: Unturned Risk of Rain Hotline miami Minecraft Terraria Nidhogg Battle block theater Both Graphical as Technical. 2 ) If you use a html wrapper to create a .exe, .apk etc. is the source code protected? Also can you compile to consoles? 3 ) I have read that you can code in c++ and compile it to javascript is that functional? Also is it possbile to write in an high-level strong language and compile that to javascript (i do not like weakly typed languages, and C++ is to low-level for me) 4 ) How does it come that i can not find any big games made in webGL (only tech demo's, fancy websites and games on this forum) 5 ) When i looked around this forum i dident saw any three.js based games. Why is that? i looked at the tech demo's of many engines and three.js looked the most promising. Or is there something i missed? 6 ) Is webGL for my project a smart choice? At the end i dont want my game to be playeble on the web. Only for stand alone on pc, linux, mac. (mobile and console if the project succeeds) 7 ) What is the best engine to use for a 2d/2.5d with some nice light effects? 8 ) Does the steam SDK for achievements, joining friends, steam controller etc. work well with webGL? Thanks for reading, it would mean a great deal to me if you know a answer to one of my questions!

Hello, I have decided I would like to sell the source code of the Node based Client/Server Engine of Retro RPG Online http://www.retrorpgonline.com. Trying to gather how much people would be interested in leasing the source for an annual fee. Upon Subscription users can use the source to make there own Online RPG. The Subscribers would also get a say in what gets developed in newer versions. The base code is from Browserquest (http://browserquest.mozilla.org/ - MPL 2.0) and more code was added to it by Asky (https://github.com/browserquest/BrowserQuest-Asky - MPL 2.0), finally most modifications were done by me. Play it and see for yourself if it is an Engine you would like to have. Any constructive feedback is welcome, thanks. Kind regards, Langerz

Hi I am building a new game for facebook Instant games and they ask for a lightweight game that doesn't use hardware acceleration. Does the particles().createEmitter() uses some sort of hardware acceleration? Usually its a yes when we talk about particles systems, but on the website it says its lightweight so I was wondering. Thank you!

Hey guys... need some help here, I'm getting this error: babylon.js?98a3:20 Uncaught TypeError: Cannot read property 'globalPosition' of null at Function.t.BindEyePosition (babylon.js?98a3:20) Now... I only get this error after I've reinitialized the engine a second time on a whole new canvas, while previously shutting down the old instance with engine.dispose(). The scenario that inits the scene is complex enough... and part of another project... so creating a playground would be difficult. (The playground seems to rebuild the whole dom and init anyways). This appears to be coming from the MaterialHelper class, and the activeCamera variable appears to be null... not sure why, though. Any leads on what this might be before I start digging?

Hello everybody, I've been obliged to find best solution for making html5 games for our company. It'd be great if some experienced developers would advice on which direction to go. We have a huge experience in Unity games development, but we already created around 10 games in Phaser 2 engine with WebStorm and TypeScript, but we're not fully satisfied because of the low performance of the games on mobile platforms and lack of support for optimised shaders. Our needs are: - Good performance on mobile platforms - 2D (but 3D would be appreciated, majority of our projects would be 2D) - Good support for sprite sheets (TexturePacker support would be great), sounds, particles, physics, real shaders (vertex, fragment), tweens, skeletal animations - Layout Editor would be great - JS ES6 or TypeScript support - Can be commercial

hi every one. i wanna make Tool to control scenes with html5 i wanna make like under images's red box. can you recommand library to make that? thx

Hi All, I'm developing an React.js APP which consists of multiple pages. One of pages contains canvas, scene and of course, engine while other pages don't. Naturally, I need to dispose scene and stop engine when I am going to leave this page while init the scene and runRenderLoop when I re-eneter this page. The related code is as follows. class Scene { constructor() { this.canvas = null; this.engine = null; this.scene = null; this.obstacles = null; } init(canvas) { this.canvas = canvas; this.engine = new BABYLON.Engine(canvas, true); this.scene = new BABYLON.Scene(this.engine); this.scene.clearColor = new BABYLON.Color3.Black(); this.obstacles = new Obstacles(this.scene); } run() { window.addEventListener("resize", () => { this.engine.resize(); }); this.engine.runRenderLoop(() => { STORE.updateFPS(String(this.engine.getFps().toFixed())); this.scene.render(); }); } stop() { STORE.toggleSceneActive(false); window.removeEventListener("resize", () => { this.engine.resize(); }); this.engine.stopRenderLoop(); this.scene.dispose(); this.engine.dispose(); } } export default class Canvas extends React.Component { render() { return ( <canvas className="main-canvas" ref={(canvas) => { if (canvas === null) { // React will call the `ref` callback when the // component is being umounted. SCENE.stop(); return; } SCENE.init(canvas); SCENE.run(); }}> </canvas> ); } } The problem is that when I go back to this page and try to dispose the mesh of obstacle to redraw, which is BABYLON.MeshBuilder.ExtrudePolygon(). It reports error: Does anyone have any idea? What's wrong with my operations? TypeError: engine is null ./node_modules/babylonjs/dist/preview release/babylon.max.js/AbstractMesh.prototype.dispose src/visualization/browser/node_modules/babylonjs/dist/preview release/babylon.max.js:13927 13924 | this._occlusionQuery = null; 13925 | } 13926 | // Engine > 13927 | engine.wipeCaches(); 13928 | // Remove from scene 13929 | this.getScene().removeMesh(this); 13930 | if (!doNotRecurse) { ./node_modules/babylonjs/dist/preview release/babylon.max.js/Mesh.prototype.dispose src/visualization/browser/node_modules/babylonjs/dist/preview release/babylon.max.js:22773 22770 | highlightLayer.removeExcludedMesh(this); 22771 | } 22772 | } > 22773 | _super.prototype.dispose.call(this, doNotRecurse); 22774 | }; 22775 | /** 22776 | * Modifies the mesh geometry according to a displacement map. updateState src/visualization/browser/src/scene/obstacle.js:73 72 | if (this.mesh) { > 73 | this.mesh.dispose(); 74 | } 75 |

Helloes. Important game points Toss up between top down rpg/adventure (snes zelda, secret of mana) with management games Should have quasy multiplayer, meaning that client deals with representation and server does everything else Procedurally generated for the most part, using tilesets or tilesections Gamepad friendly. Both X360 and DS4 How I plan to approach it Step by step, spread across mini-games and mini projects For starters, an idle game featuring the procgenned skill system Everything barebones regarding graphics untill the very end The main issues/worries I have Not sure between Cocos2d-x and PixiJS, or perhaps something else entirely, for the graphical representation What language for server side of things? Anything is fine for me, as long as its the (near)best solution I'd like to tackle the server part early on to know how to approach everything else Closing I wrote a bunch of stuff, then cut it down to bullet points as no one needs to read useless shit. I have no monetary expectations. I have an artist lined up who would do the gfx if I ever make something proper (can invest in some already done assets aswell). I do have experience modding various games and doing general coding across various languages (mini sites, apps and the like for my own amusement). I'm quick learning, adaptive and too old to have delusions of grandeur and will rather treat this as a hobby that eats a big part of my free time. Anyways, hope some of you have some suggestions and know limitations of various libraries and practices involved. I have nothing to offer in return except gratitude.

hi I try to use onBeforeStepObservable so I pass two more option to engine(http://doc.babylonjs.com/tutorials/animations#deterministic-lockstep) var engine = new BABYLON.Engine(canvas, true, { deterministicLockstep: true, lockstepMaxSteps: 4 }); and it occurs an error like below at scene.render() engine.runRenderLoop(() => { scene.render(); }); If I set the lockstepMaxSteps to 1, then it's alright. This issue seems not happen to the example on PG(https://www.babylonjs-playground.com/#DU4FPJ#3) any hint what could be the problem?

Hi guys,This will be the place where I will keep you up to date you on the latest Playniax game engine called Pyro! You can find it onitch.io Pyro is ideal for building 2D games and other interactive graphical driven applications. Pyro apps run on WINDOWS, OSX, LINUX, IOS, ANDROID and HTML5! And... It's FREE! Here is a game made with Pyro

We can render a scene in Babylon.JS reading values like position/scale from form fields. But does it allow to make changes in scene listening real time changes in input fields like $('input').val() var cusotm_position = $('input').val(); canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); scene = createScene(); //draws a mesh at custom_position engine.runRenderLoop(function () { scene.render(); }); $("input").change(function(){ cusotm_position = $('input').val(); delete scene;scene = createScene(); //hangs website for few seconds,need its alternate }); I tried to call scene.render(); on event listener of change in input but that doesn't seem to be doing anything. Is there anything like refrest/update to change to updated variable values. Better if this can be done without removing everything and recreating fresh scene. As delete scene;scene = createScene(); does refresh everything with new variable values but it hangs the website for few seconds.

Hi, I would like to modify time scale in a 2D physics engine. I searched about it, and matter.js seems to permit timescale modification. In addition, i would like to set 'different timescales' for different bodies (as example: 2 object fall, one will be set to timescale:1 and the other timescale:0.5. So this last one will fall 2x slowly) It sound nonsense, but is there a trick to do it? I thouth about saving positions on last step, and compare them to the new one, then replacing them with a homothety value relative to the timescale. But there is a lot of cases that this can't handle Any sugestions? Thanks

// @flow // $FlowIgnore import * as BABYLON from 'babylonjs'; import shortid from 'shortid'; type Color = { r: number, b: number, g: number, }; export default class Scene { _scene: BABYLON.Scene; _camera: BABYLON.ArcRotateCamera; _light: BABYLON.HemisphericLight; constructor(engine: BABYLON.Engine, canvas: HTMLElement) { const scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color4(0.5, 0.8, 0.6, 0.8); const camera = new BABYLON.ArcRotateCamera('Camera', 1.5 * Math.PI, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, false); const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 1), scene); light.intensity = 0.5; const sphereMaterial = new BABYLON.StandardMaterial('texture1', scene); sphereMaterial.alpha = 1; // sphereMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); sphereMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0.5); const boxCfg = { size: 5, updatable: true, }; const sphere = BABYLON.MeshBuilder.CreateBox('sphere1', boxCfg, scene); sphere.material = sphereMaterial; sphere.position.y = 5; this._scene = scene; this._camera = camera; this._light = light; } render = () => { this._scene.render(); } dispose = () => { this._scene.dispose(); } } import { Engine } from 'babylonjs'; import Scene from './Scene'; export default class RenderEngine { constructor(container) { this._container = container; } animate() { this._engine.runRenderLoop(this._scene.render); window.addEventListener('resize', this._engine.resize); } createScene() { this._scene = new Scene(this._engine, this._canvas); } render = () => { this._canvas = document.createElement('canvas'); this._container.appendChild(this._canvas); this._engine = new Engine(this._canvas, false); this.createScene(); this.animate(); } reRender = () => { this._engine.dispose(); this._container.removeChild(this._canvas); this.render(); } } const root = document.getElementById('root'); const engine = new RenderEngine(root); engine.render(); if (module.hot) { module.hot.accept('./RenderEngine', () => { engine.reRender(); }); } I am currently learning babylon.js and with my set up I have hot reloading, so when any files are changed, engine.reRender() will be called. To test it out I change up color of sphereMaterial. It creates new canvas, but for some reason it still shows the old colors... Is there any way to clear out the scene and engine to load the webgl with new configuration? Thank you.

Hi, How can I reliably read running scene's framerate? When I output to console values of engine.fps, it gives me heartwarming 59-60fps. However, visually my Babylon app runs at 7-8fps at most! Where's the catch? The reason I need this is to disable certain features if framerate drops below 30fps for like 5-10 ticks. Or is there a better way to detect slower devices? Cheers

Hey everyone! This is a video of a prototype for my first HTML5 game Bunny Hop made using Construct 3. I wanted to keep my first HTML5 game small and simple plus this is my first time really making a game in Construct 3. I don't think any sponsors/portals would be interested in this game for it being so small lol, but I like to start on small projects when I am testing out engines I am new to. Plus I still need to figure out how to host it onto a web server and all that. Here is the Link to a gameplay video!

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.

Hey, After making my first HTML5 game "Vertigo" - http://prtksxna.github.io/vertigo - I got a pretty good understanding of how games are made. I did not use any engine for this and the code base is pretty small. I want to make more games and I think it might make sense to use an engine for future games. I do have some limitations and requirements that I'll list below- Needs to be free or have a free trial (unlike ImpactJS)I want an engine and not a Game Maker like ConstructShould be able to deploy to mobile using PhoneGapShould be able to deploy to desktop using Node WebkitShould be in active development (it becomes really hard otherwise)Should have basic sprite/layer/screen/collision supportI know the list is too specific, but is there an engine that satisfies all this and I can use? --prtksxna

Hi All, TLDR: i really just want a javascript sprite rendering engine, is Phaser right for me and/or with 3.0 will i be able to just use that part of the engine? I am about half way through my first phaser game and am loving it. Because of the nature of the game, i am using very little of the engine. All I am currently using the engine for is input buttons and sprite rendering. No physics, movement, world updates etc... I am using all my own code for doing movement, collision, updates, etc.. In the current phaser version, i am starting to see some slowdown on mobile browsers. I still have some obvious optimization to do which will help but i am at a point now where i could move things around easily since basically everything is just pure javascript. The hooks are not deep into Phaser at all. I read with 3.0 we would be able to add and remove things from phaser to match what we need, is this still the plan? Would i be able to just use the Sprite Render and Button/Input parts? Is there another engine that might be better (maybe just straight PIXI). Or should i just use Canvas and make my own simple sprite management? Any advice from you guys with experience would be much appreciated.