• Content Count

  • Joined

  • Last visited

About Aristy

  • Rank
    Advanced Member

Contact Methods

  • Website URL

Profile Information

  • Location

Recent Profile Visitors

1014 profile views
  1. Class based OO is supported on ES6. Not many browsers support it yet so we rely on tools like Babel to transpile it down. Instead of prototypal inheritence, you can code JS like "class X extends Y" like you used to in native Javascript nowadays. There are certain things that is not supported in ES6 yet. That's where Typescript comes in. Typescript is a superset of JS that basically transpiled into native JS code. For example, there are no interfaces in JS so you cannot do the following unless you use Typescript. interface MonsterInterface { ... } class Monster implements MonterInterface { } or, return type declarations someFunction(parameter: string): string[] { return ["a", "b", "c"]; } or public/protected/private properties class X { public something: number = 10; } In my opinion, Typescript is pretty solid, but as said, class based OO is supported in native JS if you want to give it a try. I would learn what ES6 is capable of and what kind of benefits Typescript brings on top of it.
  2. Amazing. It may be a good thing to remove sticky Slack post though. I thought Phaser only has a Slack channel because of that. Perhabs can we rename it to something like "Phaser IRC, Slack and Discord Channel Information" or something similar for clarity?
  3. Hey, I know we have a Slack channel but Discord pretty much beats Slack/Hipchat out of the box. If we don't have a Discord channel yet, would anybody be interested in creating a Phaser group?
  4. Hi, I'm still looking for replies on the remaining questions.
  5. Updated my questions. Just like cookies that store session fingerprints? Am I supposed to attach them every single time I make a socket call and verify with a middleware? Some game state specific attributes such as this.players, this.enemies, this.score etc. I need to pass it in order to access "game" in class scope. I could also pass "game" to constructor, but then I wouldn't be able to access state properties such as score. Thought so. I'll most likely use this instead of creating my own. I think you're right. Sprites has alot attributes in their object. I will make sure I pass whatever I need to keep data small. Can I encode them to be smaller though so I don't pass them as plain JS objects? (e.g something that crypts the object and makes it smaller and backend may decrypt it to get object back) Yes, I was wondering the algorithm actually. Does the client generate a timestamp, send it to server, make server compare it and return the difference? Or server sends the timestamp and client compares? The algorithms I created usually breaks when server goes down and have spikes. (80 ping goes up to 800 then goes back to 80. Not because my network is bad but rather my algorithm is crappy.) Solved it. Looks like they have alot of dependencies. Cordova depends on Android SDK which depends on Java, had to install different packages and API runtimes. Took like 7 hours with my slow DSL connection but I finally got it to work.
  6. Thanks alot for the response. I'll have a look at LevelDB but most likely we'll stick to Redis since our web stack consists it and we have some experience scaling it. I'll also make sure I check the rest of your stack and compare them to ours. Well, I'm hoping so. I don't have alot of game development experience especially realtime multiplayer based ones but I'm doing my best to learn everything. There are loads of question marks in my mind but I'm solving them one by one and asking the ones where I need some expertise. I'm so glad for your replies. If you don't mind, would you be able to reply to the "flood" part of my comment? I don't know what kind of tricks can be used to prevent that.
  7. Hey, I'm here once again with some more questions. -. I want to design my code to have authentication mechanism. Should I attach a "Auth" middleware on all endpoints or is there are better way (e.g session) to handle this? Are there any examples about this? - Imagine the following code: class GameState { constructor() { ... this.createPlayer(); } createPlayer() { this.player = new Player(this).getPlayer(); } } class Player extends AbstractPlayer { constructor(state) { super(state); this.state = state; this.player =, y, 'player'); } getPlayer() { return this.player; } } This code requires me to pass "state" value into Player object so I can reference to game object using "". Can it be done in a better approach? I don't like passing state objects into my Player object. It feels like it breaks some of the solid principles, and overall looks bad. - Is it possible to pass backend parameters directly to our game without having to rely on a seperate script tag on HTML pages? Like: // backend res.render(path.join(__dirname + '/build/game.html'), { hello: "world" }); // game.html <body> <script type="text/javascript"> window.hello = "{{ hello }}"; </script> <script src="phaser.min.js"></script> <script src="game.js"></script> </body> // game.js, this.y, window.hello); // prints "world" - What is the trick to measure latency? Send a timestamp from backend, compare it to current timestamp on client and show the difference as latency?
  8. First of all, thank you for the amazing answer once again. I've never heard of this before. My last app (web based) conforms most of the articles. (not all) My flow is similar. My app's root folder looks like this: /build/, /src/, /assets/, server.js I start development by running npm start, which runs my customized Gulpfile. Gulp watches all the assets and generates /build/ folder. (e.g copy phaser, babel/lint/minify sources) Meanwhile Nodemon runs the server.js at port 80. I import Express/ Express on server.js and enable Express to serve static files with expiration dates for static files. Then I listen for the GET "/" requests and render my ./build/game.html by passing certain parameters such as host, socketPort etc. The game.html has a script tag which then assigns those parameters into window object, and Phaser during Boot period reads those values and keeps them in my Config class. When I'm done, I push to our private Github repository. A commit hook signals DeployHQ. DeployHQ deploys the game, runs the SSH commands I wrote, pings our Hipchat channel about the deployment. Also, Supervisord will always keep "npm start" up and running all the time. Our server was provisioned using Serverpilot and had PHP enabled on port 80. So I temporarily had to stop Nginx from running so NodeJS can take port 80 on production. I'll check if there is a service which installs Nginx/NodeJS and configures it properly so I don't have to rely on npm on production. I could do this myself, but as said, I'm still newbie on NodeJS so I don't even know NodeJS's configuration settings. For example, in PHP we have alot to configure (PHP, FPM, Nginx) so app works fast without hogging all the resources under high load. (Most of them are learned the hard way. ;D) I don't worry alot about scaling the game but having a proper production setup is my biggest challenge at the moment. Meanwhile, my CEO had alot of research and we're currently discussing which apps/services we need to rely on. Can I get your opinions about those? Apart from those, we also talk about using Loopback instead of Express and WS instead of It is going to be a huge challenge for us to tackle them all but I'm sure we'll overcome it as long as I believe our stack looks good. What do you think about this? Do you have any suggestions (app, service, framework, *aas, anything) which may come handy? Oh, I also have a question regarding my game. Yesterday I made a very basic game, where random gold icons appear in the world and they have collision enabled with Player sprite. It worked normal on my local environment but when I pushed it to production I realized I get more than 30 points instead of 1. It is because there is around 150ms latency so collision callback sends plently of packets in a short time before a response is arrived. (which kills the gold sprite) I tried giving an identifier to golds, kept them in an array in server, whenever a packet arrived, I checked if identifier exists in the array, if so, removed it and gave points, otherwise just did a return to stop execution. However, I literally get flooded with packets since client sends a packet on every frame as long as there is a collision. Many of the packet requests pass "if identifier exists in the array" check before identifier can be removed from the array. Is it possible to solve it using a technique in backend without having to kill the Gold entity on first collision or throttle requests? I don't want to kill the Gold entity on first collision because it will be client-side and if both players collide with gold at the same time, both of them will trigger the kill event (where I play a sound) but only one of them will receive the points. They may act like "But I was the first, I heard the sound!" which becomes a big problem on high latencies. I also have plently of more questions (like improving my current OOP model) but I'm not sure if I should create a new thread or just reply to this one. (EDIT: Nevermind, I will create a new topic with a more suitable topic name) Thanks for all the help so far, I appreciate it. Yes, saw it on MDN after posting.
  9. Do we have Reddit Gold feature in this forum? We're playing a third party applications to for installing our servers and provisioning them. They give us all the security updates and do all performance tweaks in minutes. I'll check if they have a NodeJS installer though, otherwise I'll install everything myself.
  10. Oh, I thought it was Browsersync/Livereload clone, which monitored my files and restarted the server. Actually, I relied on all those tools before. HaProxy, Nginx, Apache, Supervisord, Redis etc. When I make our game a bit more production friendly, I'll most likely write a Supervisord conf and our classic monitoring services on top. (NR, Bugsnag etc.) I know the whole PHP ecosystem in this regard (my last app has millions of daily hits, for instance) however, coming to NodeJS was a bit weird experience, specially because I wanted to start with a boilerplate and then I had to configure that boilerplate. It is not rocket science (e.g Express' API is almost identical to some micro PHP frameworks) but the whole workflow got me a little confused. Okay. I spent like a hour today with that today. As long as I can get rid of "app.use(express.static('build'))" nonsense I will be happy. How do you scale a game written in nodejs/ Getting N amount of identical NodeJS/Nginx servers and putting a HaProxy load balancer in front of them? Sorry, it wasn't clear. What I meant was sending packets. My game will be a Trivia Crack clone so I don't need 60 FPS backend. However, before I start developing the actual game, I want to get my hands dirty with all the technology around, learn some good case uses so I can develop something quality for my company. I was actually thinking about Object.observe. I'll think about getters and setters but I don't like the fact that you need to rely on getters and setters from now on. Let's say we're developing a 2D top-down ARPG. Two players are trying to kill a Monster by shooting bullets, and that Monster has collision with players, obstacles on the screen, world bounds and bullets. Meanwhile, the AI chases the closest player, shoots players, collides with other objects. If I kept every data about this monster on backend: then I should make sure I keep positions of obstactles on the backend too, otherwise collisions will be clientside. If I keep data on client side, then there is a possibility that at certain frames (both player A and player B are 100 pixel away to monster. Monster chases A on A's game, but decides to chase B on B's game) may lead to incorrect data. Syncronization may be completely broken after few more frames. If I keep data on player A's client, and simply publish everything to B (monster location, monster AI etc.) I feel like it would be better since I can develop AI directly in client, rely on Phaser's collisions without any hassle, and there is no way syncronization would be broken. (unless player1 logs out) I'm trying to be a game developer (seriously, I feel like I've seen everything regarding generic web development and nothing provides challenge anymore) and there are loads of challenges here. From writing AI's to making multiplayer RPG games, dealing with latencies, or even installing NodeJS properly, lol. Ps., this is more or less the game I want to make when I get better.
  11. Hey, Initially I used for the boilerplate of my game. I configured Gulpfile.js for my taste a bit and everything worked properly. However, I needed to rely on NodeJS/ to develop a backend server so I could add multiplayer functionality. I watched some tutorials/read some guides and eventually came up with a solution. (Actually, checked some open source Github repos and tried to learn from them.) This brought me an issue that I can't solve without having knowledge about NodeJS ecosystem. Right now, when I start developing: 1. I enter mygameclient folder, run npm start, and some plugin in this file ( hosts my game at port 3000. 2. I enter mygameserver folder, run npm start, a plugin called Nodemon executes server.js, server.js runs on port 8080 which contains listeners/static endpoints for Express. ( The whole thing became a mess. I want to make sure NodeJS runs on port 80, loads index.html when I enter localhost:80/index.html. Questions 1. Should I ditch Browsersync and rely on Nodemon? What is Nodemon? Can I just rely on a basic NodeJS server instead? Can I host everything (game files, connections) on port 80? 2. How do you install a NodeJS as a production backend? Do you need to rely on web services such as Nginx? 3. Right now my game makes a socket connection on Phaser.update, which means it transfers data 60 times per second. Would that be overkill or this is how it is supposed to work? 4. Is it possible to "Observe" player.x and player.y data, and run an event whenever those attributes are changed? (e.g player.moving((player) => this.socket.emit("moving", player)); 5. When I develop monsters, should I develop every monster related information on backend? For example, "A monster cannot go out of world bounds in Phaser." if I configure it. But, a monster must be syncronized between all clients so it's data must be kept in backend. In this case, do I need to develop "A monster cannot go out of world bounds" feature on backend? How is it being done generally? First client hosts the monsters/AI and others just see what first client sees? Thanks alot.
  12. Wow, thanks alot! This is what I did after hours of test&trial: import RainbowText from 'objects/RainbowText'; class GameState extends Phaser.State { create() { let center = { x:, y: } let text = new RainbowText(, center.x, center.y, "- phaser -\nwith a sprinkle of\nES6 dust!"); text.anchor.set(0.5); = Phaser.ScaleManager.SHOW_ALL; = true; => this.resize()); window.addEventListener("resize", () => this.resize()); this.resize();, () => this.fixMargins()); } update() { } fixMargins() { let scaleWidth = ( /; let scaleHeight = ( /; document.getElementById("overlay").style.height = + "px"; document.getElementById("overlay").style.width = + "px"; document.getElementById("overlay").style.marginLeft = + "px"; document.getElementsByClassName("box")[0].style.transform = "scale(" + scaleWidth +"," + scaleHeight + ")"; } resize() { let aspectRatio =; let sourceAspectRatio =; let windowAspectRatio = (window.innerWidth / window.innerHeight).toFixed(2); // Force the aspect ratio if (windowAspectRatio >= sourceAspectRatio) { return; } // Don't allow scaling so scroll bars will always be hidden., 1, window.innerWidth, window.innerHeight); } } export default GameState; and the CSS is: html { box-sizing: border-box; width: 100%; height: 100%; margin: 0px; padding: 0px; } *, *:before, *:after { box-sizing: border-box; } body { height: inherit; width: inherit; margin: 0px; display: block; background: #222; } #screen { position: relative; #overlay { position: absolute; width: 100%; height: 100%; text-align: center; .box { position: absolute; display: block; border: 1px solid rgba(177, 24, 24, .2); bottom: 20%; left: 35%; right: 35%; top: 20%; &:after { content: "(MENU)"; } } } } HTML: <div id="screen"> <div id="overlay"> <div class="box"></div> </div> <div id="canvas"></div> </div> and it was still pretty buggy. Scaled terribly, game started in a huge screen and only worked properly when I resized the canvas, menu was scaling in a weird way etc. Your fiddle is exactly what I was after. It scales up and down, keeps the aspect ratio and also scales DOM elements, wow! You saved me hours of development time mate, thanks alot! I'll read your code and check what I did wrong. Edit: Okay, adapted your code into my game and it works flawlessly. I have once concern though. Right now it only works if I put it in my GameState. I'll eventually get multiple states such as Boot, Loader, Menu etc. What would you suggest in this case? Should I add a wrapper class such as StateHandler and call scaling stuff on constructor once? Ps. Would you be available for paid mentorship in the future?
  13. Yesterday I gave it a try. Used SHOW_ALL feature of Phaser, added an absolutely positioned overlay div on top of the canvas. For testing purposes, I only drew a 50x50 red square to top-left of canvas screen using basic CSS. Actually, I'm still newbie at Phaser so I don't exactly know if some of the features I need is handled by Phaser, or if I should develop the functionality myself. What kind of algorithms can I rely on to scale my overlay div? Something like the following would work? .overlay { transform: scale3d( currentGameScreenHeight / initialGameScreenHeight, currentGameScreenWidth / initialGameScreenWidth, 1 ); } This is the part I must get right from the ground up to prevent future headaches. I can develop the game, but all the scaling, keeping aspect ratios, keeping to overlay intact is pretty confusing.