Search the Community

Have 2 - 10+ years of software development experience, including front-end
development experience with HTML5, Angular, Javascript and CSS • Break down user and technical stories into tasks and work on them • Maintain our existing Flex codebase and help build out a new HTML5 codebase. • Write unit tests and code comments • Write technical documentation for use by other developers, testers and support • Participate in code reviews and refactoring • Participate in Level 3 support of production environments • Attend daily scrum meetings • Collaborate with team members overseas and on location
Desired Skills and Qualifications: • Strong proficiency with HTML5 stack, including CSS3/JavaScript and at least
one library or framework (e.g. AngularJS, jQuery, etc.) – both preferred. • Good knowledge of Adobe Flex and Actionscript is a plus • Familiarity with Agile practices • Working knowledge of code versioning tools, such as Git • Fantastic communication skills Github account with c revert to [email protected]

Hello all - I have started working on my first browser-based game and I got the Phaser framework set up with Angular and Electron for this, as I'm super comfortable with Angular and enjoy playing with typescript. I started to build it and realized that getting these frameworks to play well together can be a pain for a lot of people, so I stripped back the content and posted the template in a repo on GitHub. I just thought I'd share and get the word out, and I've had decent traffic from subreddits. I'm hopeful if it gets enough use and some forks, that the implementation might be worked and improved upon. Let me know what you think, or if you have any questions about it: https://github.com/TBosak/game-template

Hi, guys I need your help, i have angular 9 project with lates pixiJs 5.x. my GPU go up until 100% when i run. I see nice article About Angulr & Pixi -> https://medium.com/@hazterisk/how-3-lines-of-code-reduced-cpu-and-memory-consumption-by-13-b451de874701 after implement changes still i get 100% GPU I create issues on https://github.com/pixijs/pixi.js/issues/6578 you will find steps to reproduce and repo

Hi all I'm using Angular4 with Phaser 3 beta 20. I need to have separate classes for the Game Scenes so that I can use different game scenes any time I wish. I need to be able to call a function in the parent component that affects the parent component variables. This is probably a totally newbie question so please forgive me, but it's stumped me for the moment on how the scope works. Please see the following code: import { Component } from '@angular/core'; import Phaser from 'phaser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { phaserGame: Phaser.Game; carrot: any; preloadStatus: string = "Preloading"; config: any; gameScene: Phaser.Class; getScene() : any{ return { Extends: Phaser.Scene, initialize: function GameScene(config) { Phaser.Scene.call(this, config); }, preload: function () { this.load.image('carrot', 'assets/carrot.png'); console.log("Phaser game loading done"); this.FromInGame(); }, create: function () { this.carrot = this.add.image(400, 300, 'carrot'); }, update: function () { this.carrot.x += .2; } } } constructor() { let theScene = this.getScene(); theScene.FromInGame = this.FromInGame; this.gameScene = new Phaser.Class(theScene); this.config = { type: Phaser.CANVAS, parent: 'phaser-example', scene: this.gameScene }; this.phaserGame = new Phaser.Game(this.config); } FromInGame() : void{ console.log("called from in game"); this.preloadStatus = "Preload DONE!"; } } I need the FromInGame() function to be fired from the Scene's preload() function, which it is. However, in the FromInGame() function "this" clearly references the Scene because "theScene.FromInGame = this.FromInGame;" is setting it as a function on the Scene. Therefore when executing "this.preloadStatus = "Preload DONE!";" it adds a property preloadStatus with a value "Preload DONE!" to the Scene and rather than updating the this.preloadStatus in the Angular component. Any ideas how I would achieve this please? Thank you very much in advance. D

Hello guys, I lost my other html5gamedevs account @Nicholls but I want to share with you guys my new contribution to Phaser 3, a web component to integrate Phaser with any other Framework (Angular, React, Vue.js, etc): https://github.com/proyecto26/ion-phaser This is very useful because you don't need to manipulate the DOM directly using ids and you can use Phaser like any other component. From the GitHub repo you can find some examples, also check from Codepen too: https://codepen.io/jdnichollsc/full/oRrwKM Regards, Nicholls

Hi there, I'm trying to run babylon on an Angular 5 application, but the quality of the rendering is very low (see image below). This is what I've done: Install babylon through npm: npm i --save babylonjs Then I had some warning during compiling process. It couldn't find cannon, earcut and oimo, so I added them through npm too. Then I created my scene (following the relevant code): init(canvasId: string, canvasWidth: number) { const canvas = <HTMLCanvasElement>document.getElementById(canvasId); this.engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); this.createScene(canvas); } createScene(canvas: HTMLCanvasElement): void { this.scene = new BABYLON.Scene(this.engine); this.scene.clearColor = new BABYLON.Color4(0.5, 0.5, 0.5, 1); this.camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), this.scene); this.camera.attachControl(canvas, true); // Create default pipeline and enable dof with Medium blur level this.renderingPipeline = new BABYLON.DefaultRenderingPipeline('default', true, this.scene, [this.scene.activeCamera]); this.renderingPipeline.samples = 4; this.renderingPipeline.fxaaEnabled = true; // Add lights to the scene const light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), this.scene); const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(0, 1, -1), this.scene); const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, this.scene); this.animate(); } private animate(): void { // run the render loop this.engine.runRenderLoop(() => { this.scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', () => { this.engine.resize(); }); } Everything runs without error, but the render quality is very bad. How is this possible? Are there any specific steps to do when working with Angular? Unfortunately same code works fine in PG, so I did not create one as the problem seems to be related to angular.

Hi there. I am very partial to Angular, I use it for basically all of my personal projects and know that, in the long run, I would want to wrap any game that I make in an Angular shell eventually. Unfortunately, as far as I can tell, it is currently quite difficult to get Phaser 3 working with the Angular CLI due to two simple things: 1) if bundling with webpack (which Angular does by default) the .frag and .vert files need a raw-loader configuration, 2) the CANVAS_RENDERER and WEBGL_RENDERER need to be initialized. The Angular CLI does allow for these things by calling "ng eject" at the command line, adding module: { rules: [ { test: [ /\.vert$/, /\.frag$/ ], use: 'raw-loader' } ] }, plugins: [ new webpack.DefinePlugin({ 'CANVAS_RENDERER': JSON.stringify(true), 'WEBGL_RENDERER': JSON.stringify(true) }) ] but calling "ng eject" has its own set of adverse side effects that are not very ideal (you lose a lot of the CLI). Is there any way that these two small things can be handled so that Phaser 3 can easily be built and run in Angular without needing to use "ng eject"? Does anyone know of a way to currently use Phaser 3 with Angular without having to eject? Currently at any point if phaser.min.js is included as a script the bundler blows up, from all that I can tell. I know that part of the underlying problem is how the Angular CLI handles its webpack.config.js file in the first place, and how the CLI team doesn't want to allow more customization in the .angular-cli.json file, but that just kind of is what it is right now. Any feedback would be appreciated, thanks!

I'm using BabylonJS within an Angular application. It is used in a Dialog and shows three dice that are falling. The first time I open the dialog everything looks fine. However, if I close the dialog and reopen it, the 3D scene is empty. I suspect it has something to do with the engine/scene not being cleared, but I have to little experience with WebGL and BabylonJS to make a good guess on how to solve it. On Close, I do call public cleanup(): void { this._engine.stopRenderLoop(); this._scene.dispose(); this._engine.dispose(); } Sadly, this does not solve the problem. If anyone can help me out, I'll be much obliged.:-) The project can be viewed on github: https://github.com/gurpsdomain/GurpsyMcGurpsFace The BabylonJS code can be found in src/app/presentation/dialoges/generic/dice-dialog/scene And a running example is available on https://gurpsdomain.github.io/GurpsyMcGurpsFace/ Click on the menu icon (top right) and select "Throw Dice". Thanks! Meron

https://github.com/GrindheadGames/phaser-ce-angular-cli-boilerplate This is a super bare bones, hello world app using Angular-CLI and phaser-ce. Thought someone might find it useful

Title: Still thinking of a name (feel free to suggest one). Demo Link: https://ccg-game.firebaseapp.com/ Description: A collectable card game similar to games like Eternal, MTG or Hex but with a new resource system and some fresh mechanics. The goal is to build a fast paced, but strategic game, without unfun mechanics like mana screw. Technologies: The game is written in Typescript and the frontend uses Angular. The backend uses websockets for multiplayer and runs on node (also written in TS). Features Includes both PvP multiplayer and an A.I for singleplayer. Four starter decks with differents strategies. A deck editor to build your own decks using the ~100 cards currently implemented (more to come). Resource system which allows arbitrary faction pairings, but doesn't rely on luck to draw the right resources. Credits Art is from http://game-icons.net/ Music is from https://incompetech.com/music/

Hi, I'm using BabylonJS in an Angular project. I used NPM and I have installed 3.0.7: "babylonjs": "^3.0.7", I think the definition file is uncompleted, because a lot of properties are not available, like: camera.alpha But it happens in others properties, in materials, ..... Inside my node_module folder: What do you think can be the problem? Thanks!

Hey guys, This is my first game for android made with p5js, cordova and angular js. https://play.google.com/store/apps/details?id=com.blissfullapps.blissgame Simple addictive accelerometer based game with a single mechanic. Subtle changes as you go make things interesting, keeps you on your toes, questions your ability, makes you think about how tiny changes increase the difficulty and how practice removes that difficulty very soon. Good soothing background music. The game play video is here One bug that I have in this game is, the background music keeps playing unless the game is exited or stopped in the background if the user exits by pressing home button. Any suggestion how to fix that issue? I have tried with javascript events and a bit of android native code changes but it didn't work. Designed and developed the whole thing myself. Any feedback will be appreciated and please share

When running in a game state, executed from an Angular controller and canvas, is it possible to end the game by routing to another angular context. I tried using $location.path("/angular-route") but $location is not defined in the game state. I've got the usual booter, preloader, and game states set up and the problem occurs in the game state. Thanks

I was hoping to have this up on a server for beta testing August 1st but now hoping for September 1st. A MMO space game with infinite space (well sort of) using Phaser and Angular. Quite a bit of interaction I did not feel worked well in Phaser and Angular worked great with saving and retrieving data from the server and passing and receiving data back from Phaser. Right now a player can mine asteroids to earn credits to upgrade or buy ships, find artifacts that range from recycle junk to tools to assist in certain areas. You can find and start a battle with pirates or other players but the battle sequence is what is holding me up from opening up beta. Why the name? Not sure how I ended up with domain name so named the game after it.

I have a workaround for this but not sure it is optimal When a specific collisions occurs I send off a request to the server and if they are no longer logged in I need to redirect them to login if (response.status == 401) { console.log('not logged in'); game.destroy(); game = null; $interval.cancel(vm.intervalPromise); $window.location.href = '#/login'; }else{ . The only way I have been able to get this to work is to change the state of the game game.state.start('loginScene'); then add a button there to redirect to the login. The error is it seems the phaser loop is still running if I call game.destroy from within the update of the active stage. This is a mix of angular and phaser and except for this minor issue things have gone quite well

Hi there, I am trying to create an Phaser/Angular2 game in Typescript with the canvas in background and the DOM at the front. I would like to do either : 1 - Change the state when I click on a button from the DOM. 2 - Or change the state when I open a component with Angular2 with the constructor of the class (in Angular2 a component is based on a class). The problem I have is that I cannot access the Phaser.game element from a fonction triggered from the DOM or in the constructor of the class. 0 : I define the Phaser.Game object on a first class, I start the first state and I go to the page "/loader" with the angular route : import {Component} from '@angular/core'; import {LoaderComponent} from '/loader.ts'; import { ROUTER_DIRECTIVES, Routes, Router } from '@angular/router'; @Component({ template: '<router-outlet></router-outlet><div id="content"></div>', directives: [ROUTER_DIRECTIVES] }) @Routes([ {path: '/loader', component: LoaderComponent} ]) export class GameComponent extends Phaser.Game{ constructor(){ super('100%','100%',Phaser.AUTO,'content', {create : this.create}); } create(){ this.state.add('Loader', LoaderComponent); this.state.start('Loader'); this.router.navigate(['/loader']); } } 1 : In the first state I create a button and console.log this.game import {Component} from '@angular/core'; @Component({ template : '<button (click)="log()">Log</button>' }) export class LoaderComponent extends Phaser.State{ public game:Phaser.Game; constructor (){ super(); console.log(this.game); //return null } preload(){} create(){ console.log(this.game); //return the right Phaser.Game object } log(){ console.log(this.game); //return null //this.game.state.start('NewState'); //Not working obviously } } I guess this is because the Phaser.Game is liked to the Phaser.State object accessible from preload and create, but how can I access this object from the constructor or at least the fonction 'log()' ? Thanks for your help =)

Hello! I have the following task to do in the next following 3 weeks: create a real-time multiplayer strategy game. I have no experiance in making multiplayer games, no experience in phaser io, node js or using web sockets. But I am a fast learner and I already learned a few things about those libralies. I am thinking of using Angular and phaser for the client side. Nodejs and socket io for the server side. The thigs I need to be done: -multiple game rooms -states for the game(menu, playing, game) -user authentication -interacting on a MySQL table for users (connecting two servers) -building logic for the game -real time syncronisation between every player, every unit(when it shoots, move) Ok so the first 5 issues won't be such a dificulty for me and if it was a single player game I probably wouldnt ask this question. I am really asking for help for building the base thing and some "proof of concept". I need to connect the two players in one room, need to when a single unit is moving and shooting to some building, and the building(tower) shoots back this to be sincronized and to work for lets say a 100 units. Where do I start? What metod do I use? 1. Shoud I have game state on the server and this logic to be in the server so everything is syncronized? So when two player start playing the game, the server also (plays the game) in some kinda loop until the game ends. And sends to the users JSON lets say 30times/second. And the user interact to the game logic with controllers, which sends the info to the server and server updates it's state, mean time the client still gets every second a lot of json objects, and rerenders on every change. 2. Using Observer pattern with syncronizable interface, for keeping track of enemy possitions on your client. The server is only used or transfering data and authorising, nothing else. Have sepparate game states on each client, which you syncronise with other clients? So which method would you advice me to start with for my prove of concept(I accept other sugsestions)? How should I build my archictecture? The prove of concept is the basic thing that I should start with but is the most hard one. I am way over my head. I would really use some help. Thanks!

Hello, So I was wondering could you add my game http://chiland.pl to the Made With Pixi page that would be so cool. Anyways the game is about a top down shooter you go around and collect coins. You can save progress, load, there is a new random map loaded every time you go to exit I upgrade each week, it has android app.

Hi guys, See my demo about this issue: http://phaser.azurewebsites.net/runner2/ Set the pivot to rotate the sprite doesn't work Regards, Nicholls

Hi, I was wondering if anyone had any tips as to how I would go about creating a Single Page Application that could switch out different games. I need to allow the user to play a certain number of rounds of a game of mine, and then switch out to another game after they have played all the rounds. Each game will have 1 file for each state of the game. Generally, Boot, Preloader, MainMenu, Game. I am looking to build it in Angular. I just have a few questions... How should I manage all of the files for each game? I have looked into Require.js. Do I need to load in every file for each game at the beginning or should I load in each game at a time, one after another? How should I manipulate the DOM? When I switch out the games, should I be destroying the canvas element and the pixi instance and whatnot or should I be switching views or something within Angular? Any help is much appreciated. Also, if you're looking to make some money, I'll pay someone to help.