Search the Community

I posted a response in a thread that had some applicable information to it, but it never got a response and I have questions, so this is sort of a re-post. I've created an HTML5 clone of a game I saw in a casino recently wherein players "grab" cards as they are dealt in order to reach a target score determined randomly before the game starts. I specifically created it to be played using physical buttons around a TV embedded into a table. I used the EaselJS APIs and I'm pretty happy with the results. The next level, so to speak, would be in allowing players to use their mobile devices to grab cards from a main play area (i.e. the TV). If you've played any of the Jackbox Party games, you'll know what I mean. I've gathered that in order to do this I'll need to leverage node.js and sockets.io to get players' mobile devices talking to the main game screen, but that's where my understanding ends. I don't really intend on releasing this to the public or anything, more for just me and my gambling friends, so I wan't to spend as little as possible, ideally nothing, on server usage. I've already setup a webserver in my home, strictly to serve internal IPs, using XAMMP on Windows. I created a basic node js server and I'm able to send messages back and forth, basically culling information from tutorials. What I'm looking for is how to best approach having players, using their mobile devices, interact with a separately rendered "main" screen. So, for example, the main screen displayed on the TV flips over a 10 of hearts. If a user wants that card, they tap a button on their device to add it to their hand. Unless I've missed my mark, the client (the player's mobile phone) sends a request to the node server, which then pings the main screen to give it info regarding which card is showing. While the main screen then locally stores that information into it's arrays (tracking players and their points), it sends a ping back to the server, which in turn sends a ping back to the client to animated the card image to their device and updates a score display. Do I have all that right or is there some far easier way to do this? I can't have the node server file the same as the main screen because it doesn't know how to process any of the other stuff going on, but I could be wrong. How do I tell the node server to get the card value from the main table and send it back to the client in one elegant function? There are other things I need to do, but this is the central piece to the entire project.

I am creating a game and want user logins. I am using Node, socket, and MySQL. What do I need so that when a user log's in they don't need to login again?

Hi ! I have a mobile game based on pixi.js+pixi-spine (let's call it the client). I also have a backend in node.js (let's call it the server). Now, I want to dynamically generate gifs from my spine characters and display/send them from server's side. I have 2 options: generate the gif files on the client, send them to the server store my spine assets on server, generate the gifs server side I'd prefer option 2, but rendering on an headless server seems to not be a straight road. I tried quickly node-pixi, just the require is complaining about window missing. Anybody has experience doing tis kind of server side rendering? Any suggestions?

I'm using express.js to serve a BabylonJS app statically. The dev server is ts-node running on localhost. Everything is going great except that it won't load .env files. If I try loading the .env file: const envTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("assets/textures/mono_lake.env", scene); const skyBox = scene.createDefaultSkybox(envTexture, true, 128); I get the error "Cannot load cubemap because files were not defined" in the console. Elsewhere on the forum, I see that people using IIS servers need to explicitly allow .env file mimetypes in a web.config file, but I'm wondering if this is necessary in express running on locahost? What makes me think it is not a mime issue, is that I do seem to be able to load the .env as a binary file if I use the code below: Someone must be serving Babylon files over node, does anyone know how to get this working? const assetManager = new BABYLON.AssetsManager(scene); const skyboxTask = assetManager.addBinaryFileTask("skybox", "assets/textures/mono_lake.env"); skyboxTask.onError = (task, message, exception) => { console.log(message); } skyboxTask.onSuccess = task => { console.log("success, length: ", task.data.byteLength);// returns the correct length of the .env file } assetManager.load();

How do you configure the server for this template ? => https://github.com/nkholski/phaser3-es6-webpack I'm trying to do it by following this tutorial => https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-1/?a=13 I added two dependencies: nodemon and express. I created the server.js file with the server configuration. const express = require('express') const app = express() const server = require('http').Server(app) const path = require('path') app.get('/', function(req, res) { res.sendFile(path.resolve('index.html')) }) server.listen(8081, function() { console.log(`Listening on ${server.address().port}`) }) In the package.json file, I added a command to start the server: nodemon src/server/server.js The server starts correctly but the indicated html file can not read the scripts (" The load failed for the "script" element with the source vendor.js and app.js"). Project structure:

Hello! We made an IO game called PirateBattle.io and you can play it here: http://piratebattle.io/ Mobile app version here: https://play.google.com/store/apps/details?id=com.jettigames.piratebattle IOS coming soon You are a pirate ship and you shall collect coins and shoot other ships. Coins are used to upgrade your boat. Controls: Use mouse to move Use left click to shoot Use space to boost Use 1, 2, 3 and 4 to upgrade your ship if you have enough money This game is made using Phaser, socketIO, NodeJS backend and Nginx for serving the static files. PLAY IT HERE: http://piratebattle.io/

New to Phaser. wanted to make a cool tool that could extend into Phaser! Abra Auto loader and server for Phaser. Just install node and go! ( Not sure if this would be best category for this topic) Auto load assets into phaser and run it as well. Stop messing around with the back end and writing asset files into your code. Abra works with all types of files. It will auto load anything you want it to. Some files just require a bit of extra love. Turn your preload asset code into easy auto loaded assets. Abra grabs asset files automagically. He can grab most assets without any instructions, but can also grab sprite sheets and atlas with simple configuration file. Your preload could look like this. Try Abra today and turn your code into functional easy design. Abra also protects your code by obscurity. If javascript is copied. User does not have asset list, or any actual Phaser code used to load assets. I have seen a few tools that somewhat do what I aimed to do, but not quite the same functionality. I really aimed to make an autoloader/server. Where nothing has to be done to get assets loaded into phaser. Abra can load most assets with no instructions. This was just a fun test project I made for node, but figured I would release it to the community to see if anyone has some use for it. There are a few small glitches I am working out. For the most part should be able to be used to extend phaser and make it much easier. If project gets popularity I will keep it up and add more features and bug fixes. Turn your preload code into this.. With no configuration. Just use abra to start the server! Abra is loading all assets into phaser! var PreloadState = { preload: function () { //built in Abra asset load function and Abra object creator. Send true flag to use directory listing for asset names. directory-assetname. False = just Asset name for sprite. Warning this can result in images with the same name to have the same sprite name. Function.apply(null, ['dirAdd', JSON.parse(document.getElementById("phaserConfig").getAttribute('value')).abraLoad])(false); }, create: function () { this.state.start('HomeState'); } }; Abra also lets you create custom functions/ or use built in functions to actually extend Phaser code. Make an entire layout with 1 line of code - and math equations. You can create entire layouts within Phaser. With two math equations and a few JSON objects. Create multiple sprites with just array placements - Also auto generate arrays with math or static variables. Position below x,y are created with chained equations. Example 0+100 is set for x. which will +100 for each of the array spots. So the last array spot = 800. Y is set to something like this. 0+250_4 (Which tells abra to make it so y only gets the +250 every 4 spots. resulting in the first 4 being 250 and the last 4 being 500.) You can chain and do any type of math. Addition/Subtraction/Multiplication/Division. Anchor is set to 0.5 in the example below. x: anchor logic is the exact same as y. Write much less code and even chain math equations to create functional easy design. "spinner2" : { "position": { "x": "[{math-x}]-8", "x": "[{math-y}]-8", } "anchor": { "x": "[{anchor}]-8", "y": [0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5] }, Create this!! With just the code below! "{mx}": "48+48_1-480_10", "{my}": "100+48_10", "qbox" : { "anchor": { "x": "[0.5]-100", "y": "[0.5]-100" }, "position":{ "x": "[{mx}]-100", "y": "[{my}]-100" } } https://github.com/Ravonus/Abra The documentation will get a bit better. For now if you have any questions feel free to ask.

Hello, I am creating realtime game using node + socket.io. At the moment I'm trying to figure out how could I animate other players movements. This is how I put other players on map: socket.on('showPlayers', (data) => { for (var key in data.players) { if(key != data.id) players[key] = game.add.sprite(data.players[key].position.x, data.players[key].position.y, 'player', 1); } }); And Updating their positions: socket.on('updatePlayers', (data) => { players[data.id].position = data.position; }); To animate my own player I am simply using: // Player player = game.add.sprite(48, 48, 'player', 1); player.animations.add('left', [3,5], 5, true); player.animations.add('right', [6,8], 5, true); player.animations.add('up', [9,11], 5, true); player.animations.add('down', [0,2], 5, true); Best Regards!

Hi everyone, I'm trying run require('babylonjs') on server-side, but getting following error: DebugLayer.InspectorURL = window.location.href.split('/')[0] + '//preview.babylonjs.com/inspector/babylon.inspector.bundle.js'; TypeError: Cannot read property 'href' of undefined Any suggestions are welcome

Hi all, We with my colegue decided to share texture generator node-js tool that we created. Its port of compresed texture generator script to node, so it can be used cross platform not just on win machines, also included in build scripts. NPM: https://www.npmjs.com/package/babylonjs-texture-generator GIT: https://github.com/evolution-gaming/babylonjs-texture-generator Feel free to post issues and suggestions on github. More information is located inside README.md file.

Hi! I'm in the process of developing an online multiplayer snake (4-8 simultaneous players in a grid based arena) with the stack involving Phaser in the client, Node in the backend with the networking protocol being websockets through socket-io. The progress made so far has been a prototype consisting of a dumb client and an authoritative server. The server proceeds game logic by 100ms and emits the result to the client at the end of each iteration of this game loop. The client is able to tell the server to change its direction to up, down, left and right, respectively, and the server will use this in order to calculate the next x and y position for this client (which is on the next tick). If the server notices clients colliding with walls, other clients or fruits, the involved client(s) is affected accordingly. The issue with this "dumb client" approach is that the responsiveness for the client seems to be lost in not actually simulating anything locally. From what I understand, to mitigate this lag for the client, client prediction can be applied. Since the movement is actually not caused as a direct action from a client but is always constant (you only influence direction in snake), this would mean that this 100ms game loop would have to be simulated in the client as well, with directional client input being respected and simulated directly in the client at the same time as it is being sent to the server for "verification". For some reason I cannot seem to wrap my head around this topic of the game having "constant speed". The examples I've read are mostly based on games where the movement is based directly on a fixed action, say "move me 10 px to the right", and not constant in the way snake is. Does this “constant speed” design change how I should tackle lag mitigation techniques such as client prediction? What about entity interpolation/extrapolation? Any help or guidance would be greatly appreciated.

Hi all, Babylon.js makeIncremental script port to node/gulp , so it can be used cross platform and integrated in build tasks. GIT: https://github.com/evolution-gaming/babylonjs-make-incremental NPM: https://www.npmjs.com/package/babylonjs-make-incremental Feel free to post issues and suggestions on github. More information is located inside README.md file.

Hi everyone, We made a simple runner demo with Phaser that works as a base for all our future projects. We are using node modules to make our development easier. We shared it on github so more people can use it and learn from it: https://github.com/Tembac/ChimangoGamesDemo You can try it here: http://chimangogames.com/games/demoRunner/index.html It works great on every device we tested but some people reported that it is running slow on Ipad mini 1gen. We don't have that platform to test so it is hard for us to know how to improve it. Can someone give us tips on how we can improve performance for this demo on that platform? Thanks!

Currently, when a client moves, the inputs are processed on both the client and the server which use the same calculation to process the movement. When the client receives an update from the server, the servers position will override the clients position. I would hope that the client and the server would calculate the same positions, but that is not the case. I believe timing is the culprit. What is the best practice when syncing movement? Current flow: Source: https://github.com/GodsVictory/SuperOnRoad

Well I don't know what I am doing wrong anymore, and its keeping me up at nights! So if you are a kind soul out there, please, please help me correct my erroneous ways Here is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Tutorial Endless Runner RPG </title> <script src="phaser.min.js" type="text-javascript"></script> <script src="boot.js" type="text-javascript"></script> <script src="preloader.js" type="text-javascript"></script> <script src="level001.js" type="text-javascript"></script> </head> <body> <script type="text-javascript"> window.onload = function () { var game = new Phaser.Game(800, 600, Phaser.AUTO, ''); game.state.add('Boot', Game.Boot); game.state.add('Preload', Game.Preloader); game.state.add('Level001', Game.Level001); game.state.start('Boot'); }; </script> </body> </html> The boot and preloader is pretty much empty, on create they boot the next game state. Which leads up to Level001, where I set the background color to some grey blueish color. However, when I run the application (index.html) through xampp, I get nothing, not a squat. The problem with nothing is that it doesn't even display any sort of errors, which I in-turn interpret as some sort of linker error, like a null pointer or what not that is just fine with running because if there is null send somewhere, it doesn't do anything to begin with. I've tried to move my files, changing the script src, I've tried rewrite my code, I followed guides, red others downfall, yet nothing so far has shed light upon the dank and gloomy code that I've written. I am all out of aces, yet the battle hasn't even begun. Please let me have a fighting chance in this havoc

I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my github.io link as a base starting point for creating games with Phaser using TypeScript taking advantage of the Phaser npm module and Webpack for building (which I couldn't find a template for, so I made one). It includes the typical 3 states (boot, preloader, title) to show the flow of a Phaser game. It also includes a watch task that watches the project for any changes and recompiles, and another task to run a live server that refreshes automatically after a build. It only takes a few seconds and a couple commands to get going (after having node.js installed)! It's platform agnostic (I've tested on OSX, Ubuntu running on a Chromebook, and Windows 10 in a VM running on OSX and had zero difference in behaviour). Hopefully someone here will find it useful, or at least take a look and let me know how to improve it (I plan on using this template and it's evolutions for all my future Phaser projects)!

Hey everyone, Sorry for that rookie question. I'm trying to develop this 1vs1 RPG multiplayer game and have a hard time implementing player matchmaking mechanism. For testing purposes, I'm creating a player when the client connects to the server. // Client side: const socket = io(); socket.on('connect', () => { socket.emit('create player', data => console.log(data)) }) // Server side: let players = []; const playerFactory = () => { return { state: 'idle', // idle, searching, fightInProgress lvl: getRandomArbitrary(1, 10), // Get random number from 1 - 10 winRatio: getRandomArbitrary(0, 100) } }; io.on('connection', socket => { socket.on('create player', fn => { console.log('Player created'); const player = playerFactory(name); player.id = socket.id; players.push(player); //returning acknowledgement to client fn(player); }) }) Assuming there is a 'Find opponent' button. How do I watch and match players with 'searching' statuses and appropriate levels? Also, how would I match players by their win/loss ratio? Any information or code examples, libraries or frameworks would help a lot. Thank you in advance!

Hi guys, I have a socket.io server running with node.js and i am trying to add players/sprites to my game. I am trying to figure out the best way to do this. As of now i have been working towards using object arrays but i know this is a better way. socket.on('addPlayer',function(data){ var thisID = data;//myArrayID; if(data.id == myID){ }else{ console.log(thisID); pFish[thisID] = this.add.sprite(); pFish[thisID].x = this.world.centerX; pFish[thisID].y = this.world.centerY; pFish[thisID].anchor.setTo(0.5, 0.5); pMouth[thisID] = this.add.sprite(0, 0, 'spMouth'); pMouth[thisID].anchor.setTo(0.5, 1); pMouth[thisID].animations.add('eat'); pMouth[thisID].animations.play('eat', 30, true); pTail[thisID] = this.add.sprite(0, 0, 'spTail'); pTail[thisID].anchor.setTo(0.5, 0); pTail[thisID].animations.add('swim'); pTail[thisID].animations.play('swim', 30, true); pTail[thisID].y = spMouth.y - 12; pFish[thisID].addChild(spMouth[thisID]); pFish[thisID].addChild(spTail[thisID]); pFish[thisID].scale.setTo(0.2, 0.2); pFish[thisID].angle = 110; } }) So what i really want to do is add a player object. This way i can have all 3 sprites inside the object and i can just change the object. Of course i will need to update each player with the corisponding input comming in from the server. Any good examples of how to do this in a OOP method for Phaser.? Example: BasicGame.Game.prototype = { preload: function () { //this.load.script('io', 'node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js'); //console.log('NODE LOADED'); }, create: function () {

My first HTML5 Game, Snaked.io (So exciting! ) Every since playing the famous revolutionary agar.io game, I was inspired to create my own "io" game, so here it is! I took the classic version of Snake, and made it multiplayer Snaked.io (Server may take a while to connect, and a bit laggy due to it being free from Heroku) Basically, what I want to know is (preferably 1-10 scale): Do you like the concept? How easy was it to understand how to play? What would you add/change? Any bugs? (For now, may experience lag) What do you think of the name of the game? Anything else that comes into mind, please add! Gameplay Objective of the game is to eat the gray squares causing you to extend your length, while avoiding crashing into yourself, or others. Become the longest of them all! Controls W or ^ - Up S or v - Down A or < - Left D or > - Right Enter - Chat Hope you enjoy this as much as I did making it! SCREENSHOTS Screenshot (1) Screenshot (2)

This request is more for the BabylonJS maintainers like David. I talked you guys into letting me add node.metadata which is WORKING GREAT... SO GREAT that i really need (and hope you can see the same value as well) of having the same serializable metadata at the scene level. So i am asking SOMEONE to please: @serialize() public metadata:any = null; to babylon.scene.ts so it can be used exactly like node.metedata. Right now if i want to store SCENE level metadata i gotta put a DUMMY mesh (or node) into the scene and search the all the scene.meshes to find some node.metadata that has been aliased to be used as scene level data. That kinda sucks (Note: I DONT MEAN BABYLONJS sucks in any way... remember... I luv you guys and the very concept of babylonjs ). Just not a clean way to store and retrieve any scene level metadata. Adding scene.metadata would give that same 'automatic de-serialization' of the built in babylon parsing framework. We will end up with a real javascript object scene.metadata JUST LIKE node.metadata Please REALLY think about it... I would luv to clean up some of my BabylonJS loader code and having to look thru the scene nodes to grab a dummy node with my scene level metadata, really bugs my OCD Thanks again for even thinking about it

Hello, I'd like to ask you guys about your experience and for some advice. I'm looking for some hosting which would allow me to run node.js app on the server side and allowed me to use websockets. I'm doing some screening know and I'd love to have some info from you guys to see what works for you the best? It would be nice if the hosting also supported php + mysql, I'm not necessarily looking for a free hosting, I'll be moving a company website there as well because I'm not too happy with my current provider considering what I pay for it and what i get back from them. Thank you for your advices.

Hi there, http://www.circlebattle.com The code is at https://github.com/chiefsmurph/circle-game This is my game called Circle Battle. I currently have it set up where there are different "rooms" which have different kinds of gameplays. But because there are not a lot of players currently, I am thinking of going to a system where players are paired up as they arrive and then I would set up a way where they could set the circle radius, speed and whether or not intensity mode. It's still very much a work in progress, but there has been many hours put into developing the game. John

Hi, just started working on my first Bablyon project. I'm planning a client/server model that will share some code between Node and the browser. I've encountered a couple of pain points, and noticed there is no issues section on GitHub, so I'm guessing this is the proper place to discuss with devs? The first is pretty major, the npm module uses a minified version of the source as its entry point, which is excruciating to debug! It's impossible to set breakpoints or sometimes to even work out which function is failing. Ideally the project would be distributed as unminified JavaScript that includes source maps. There is no reason to minify code for npm since it will ultimately be handled by the user's build tool (in production only!). The other problem is that I'd like to use the `Vector3` class (and perhaps others) in my server code. To do so I must "pretend" that `window` and `navigator` exist in the global scope. global.window = {}; global.navigator = {}; import { Vector3 } from 'babylonjs'; Ideally I'd like to do something like this: import { Vector3 } from 'babylonjs/Math'; That is not possible since the unminified source is not supplied in the package, and if I understand correctly, does not use the node module system anyway. Since the file `babylon/src/Math` actually doesn't require access to `window` etc. this should be fine. It could potentially make sense to split `Vector3` into its own repo and have it as a dependency of babylon? Is there any interest or discussion in this area? How do other people debug the minified code?

Inclusive Technology Ltd, an award winning special educational needs software company is seeking a skilled HTML5/JavaScript online game and app developer with the experience to undertake a variety of new innovative projects to work alongside an existing team of designers, animators and developers on a full time permanent basis at our offices near Manchester. Experience and Skills; Essential skills: Proficient in: JavaScript Node.js. HTML5 Experience with: CreateJS or other libraries based on Canvas 2D API. Bundling tools, such as Webpack. REST style web service interaction using JavaScript. Git version control. Adobe Creative Suite. CSS3. Creating optimized HTML5/CSS3 mark-up based on a prepared visual design. Strong communication skills and drive for excellence. A keen eye for detail and ability to meet deadlines. At least one game online, preferably more. Preferred Skills: Experience with Spine animation tool. Experience with WebGL. Mobile development experience. You have hands-on experience with Agile methodology. The Opportunity: The role involves some challenging work developing award winning, innovative, accessible HTML5 games for early years and special needs. Predominantly the skill-set required is JavaScript and HTML5, whilst a good knowledge of server-side programming would be of benefit. Candidates must show a higher than normal interest in web technology and development and must be willing to go the extra mile to achieve their assigned goals and deadlines. The successful candidate must also be a confident and accomplished communicator able to fit in with a highly active and integrated team, work processes and Agile environment. Benefits: Free lunch Pension contribution Salary: Negotiable dependant on experience Successful candidates may be required to complete a small test. If you are interested in this opportunity and would like to apply, please send your CV and live examples of your work to: Chris Thornton Creative Director Email: [email protected] Website: www.inclusive.co.uk

So... I've been trying for days now to get modules to play nice with babylon.js, thus far without success. babelify, webpack, browserify, nothing seems to be working. Can anyone give me a hint on how to properly package it so that it actually functions? The current error I'm running into (and there have been dozens of various errors from the various attempts) is that BABYLON is not defined. require ('./babylon.js');var createScene = require ('./Sub_Scene1.js'); console.log('1');window.addEventListener('DOMContentLoaded', function(){ var canvas = document.getElementById('renderCanvas');var engine = new BABYLON.Engine(canvas, true); console.log('2'); var scene = createScene;engine.runRenderLoop(function(){scene.render();}); window.addEventListener('resize', function() {engine.resize();});});console.log('3');