Search the Community

I was working on a scrollview solution for pixi today and after trying few approaches like using `pointermove` event, `pixi-viewport` that yielded relatively poor performance I landed on a custom solution where I overlay scrollable div over pixi canvas and then on that divs `scroll` event I update my containers y and x values. This works insanely good in terms of performance and keeps some things like scroll bounce on ios, so I am happy with it. The issue as you might guess is that this div covers canvas and I can't disable it's pointer-events, otherwise I loose ability to scroll. It does however have same positioning and size as pixi canvas beneath it, so I was wondering if I can take events from this div like pointerdown / pointerup etc... and somehow trigger them on pixi's canvas / stage element as well to sort of "pass pointer events through that div down to canvas".

Hi, I'm tinkering with a strategy game concept and I thought I could try web-based technologies for faster prototyping. I'm more of a Java programmer, so I'm learning the ropes, but I think that a web game will be easier to iterate on with over people : no need to install anything, just go to the link! I saw there are multiple frameworks: pixi, phaser, melon, babylon, etc. All of these have some basic support for UI, but it looks to me it still is pretty poor compared to DOM/CSS native features, or you need a greater involvement in graphics wrt code. Following a few tutorials, I could easily use Vue+Bulma to draw a quick UI prototype (see https://guillaume-alvarez.github.io/technologies-app/), only missing the game map (that will need another framework obviously), I think it would have taken me much much longer to do the same thing with Pixi (I tried it a few years back). However I see most game only UI is made in the same framework as the main game view (pixi, phaser, etc.)... So I'm curious... Why is that? Maybe my use case is a bit specific, relying more on UI than on animations? Or I missed some great UI library for these frameworks? Or for mobile screens you need a more integrated UI? What am I missing?

Hi guys, in the release of phaser 3.13, the developers of phaser have said that the support of scale manager and dom elements will be available in the phaser's 3.14 release, but after release we see that these functionalities are not available for us for now ? So who can say when it will be available and is there another option to solve problems related to adding dom elements and scaling.

I use a web programming language based on the Basic syntax. i know, it's stange. The main purpose of this language is to allow development windowed based web applications . It provides commandset to handle GUI and 2D games. The compiler generates html and JavaScript files or packages for Android ans iOS This programming language uses the Dojo.js and Pixi.js frameworks. ■ But ... no features for 3D environment. I have created a plugin that integrates the minimal features of babylonjs. Example : Mesh = CreateBox(Name.s, Width.f, Height.f, Length.f) I insert babylonjs in my plugin like this : require( [ bjsenginepath + "/babylon.custom.js" ], .. I have no probleme with the 3.1 version. But i have errors with the 3.2 Alpha. Thank you for your help.

Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share!

Hi, the following website has a cool click interaction, made, I think, with some GL shader. http://www.anagram.paris/ This website uses React in order to render the DOM structure, but at the end the only thing I see is the canvas element. Also, everything seems to still have the DOM events (hover and clicks). With Pixi, i suppose I should take the DOM of my App, apply it to a Sprite (as Texture) and then set a Filter. Is there any tutorial or at least a suggestion about this? Thank you

Hey everyone, I see various games using the DOM for certain elements, I was wondering about peoples experience on this, I have a pretty complex HUD designed and feel it would be much easier to maintain and manage in the DOM and use events from the game to update the HUD. Would you suggest using the DOM or MelonJS? Advantages/downsides would be appreciated.

Hi Guys, I am new to interactive HTML5 stuff, so I'm hoping you good folks can help me with this. I'm no professional developer, but I am a professional audio editor. I have a little bit of experience with HTML code and javascript/c# and enjoy working on small projects as a sideline. To make my first interactive/game-like project a bit easier, I decided to try Google Web Designer. I had some problems with the first attempt, so this time, I coded the CSS content and some other bits myself. The problem I am stuck on now is where I want a spritesheet animation to change play direction with a click event. I recreated the problem in a small project: This is the outcome When Reverse is clicked, I created a function event which adds reverseplay="" to the element which is a boolean attribute. When I add this in the HTML, then run it, it works, it changes the direction of the animation. But when I change it dynamically, it doesn't work. So how do you guys work around this kind of screen/GUI update problem? To test if changing a different attribute works, I dynamically change loopcount="1" to loopcount="2", which works fine. So the Loop = 2 button makes the animation loop twice. I appreciate any help with this; If you need to know anything else about the project, just ask. Thanks

In peoples experience / opinion which is the better approach to building a User Interface for an HTML5 game? I've found mixed opinion and approaches across the web (as with most things HTML5 games related). As far as I can see the advantages in using the DOM are styles can be set by CSS (so no need for sprites and images), and it isn't redrawn by the main game loop on each redraw (as this is then handled by the browser, and presumably is generally accelerated by the GPU). It's also easier to handle user interaction such as click events through the DOM. However I know accessing the DOM can be very slow from javascript, so it's how you mitigate that when you want to update parts of the interface. It's also worth noting that I've encountered performance issues using the DOM for a UI on my mobile phone. Currently the UI is just static and does nothing, but I still get frame drops. I realise it could just be my phone, and I need to check whether not layering the DOM objects over the canvas improves performance - but in my game engine I get a steady 60fps on my phone when the DOM UI is hidden, but this drops massively when it's displayed. This could easily be something I've done though?!

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 =)

<body> <div id="game" style="height: 600px; width: 800px; margin: 20px; position:relative;"> </div> <script type="text/javascript"> var game = new Phaser.Game('100', '100', Phaser.CANVAS, 'game', { preload: preload, create: create, update: update}, false, false); Here is the relevant code. According to the documentation the phaser canvas should fill the parent container when the first two arguments are '100'. However instead it takes on the height and width of the window. The canvas element IS a child of the div with the id "game" however it is much bigger than that div (its the size of the window). I think I must be making a silly mistake, but I have been fiddling around with it for 30 mins or so and can't get it to work. Thanks for taking a look.

Looking for a talented HTML 5 Games Developer, based in London. Must have: Experience in HTML5 games development Be well versed in OOP practices and design patterns Knowledge of the latest libraries and frameworks Even better if: Experience with CocoonJS or PhoneGap Experience with WebGL An open minded, keen candidate is essential, someone who is positive and self-motivated, always ready to learn. If you are interested in this position, please do not hesitate in contacting me to discuss this further.

HTML5 Game Developer Im looking for a talented HTML5 Game Developer to work with our fantastic client. You will be working in a very young, vibrant and fun environment on a variety of cross-platform projects and see them from concept to delivery and beyond. Based in London, we can assist in a relocation if necessary Key Requirements for the role: Experience in HTML5 games development using DOM and canvas Passionate about games, with an understanding of game-play mechanics Well versed in OOP Practices and design patterns Knowledge of the latest libraries and frameworks Experience with using third party plugins and code and knowing when to use them Positive and self-motivated Open-minded and keen to learn Other desirable skills: Experience with CocoonJS or PhoneGap Experience with WebGL Experience with Flash, Unity or C++ Experience in general digital media asset production If you want to discuss this role further, Dont hesitate to give me a ring as soon as possible. Nixi Jhakra DDI: 0044 (0) 203 056 5960 EMAIL: [email protected] Job Type: Full-time Salary: £70,000.00 /year Required education: Diploma/Certificate

I've been working on a simple canvas game and have run into a problem :/ Here it is --- http://users.sussex.ac.uk/~bc216/AXOLOTLBASS/ Here's a link to the code on github https://github.com/BB-000/Axolotl-Bass-in-Space/tree/master/js It uses the metronome example from this Web Audio tutorial http://www.html5rocks.com/en/tutorials/audio/scheduling/ Everything works fine on my macbook pro when run on my local server, however when I uploaded it live to the web it sometimes starts struggling after about 10 minutes of running the audio starts to crackle and eventually stop. I tested it on some slower laptops and it struggled a lot more - took a couple of minutes before the audio crackled / cut out and and started to lag. This makes me pretty sure it's a memory leak causing this. I did some profiling and fixed the way the entity images were handled, used a resource loading class instead of using new Image() each time. This fixed the dom node problem on the timeline : Before After But the problem still occurs, the memory usage still slowly creeps up. The memory snapshots show some image elements in the detached dom tree in red : heap snapshot - Does this mean the entity images are somehow not getting removed properly or are being duplicated still? - Or could the problem be my removal of entities using Array.splice[index] ? I've read this can cause problems but thought my game was too small / simple for this to be the case? Here is the relevant code for dealing with entities (they are spawned by pushing them onto the monsters[] array) // in the monster's update function if (this.isDead === true) { if (barNumber % this.barTiming === 0) if (current16thNote % this.timing === 0) { // Waits until it's queue to disappear and play it's sound score += this.points; this.toRemove = true; // sets to remove to true, read this could solve some problems // playSoundDelay(samplebb[this.sound], this.channel); } } // monster's render function, (thought this could be something to do with it if the image elements are the problem) render: function (ctx) { if (this.isDead === false) { ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); } else if (this.isDead === true) { // if monster is dead, make it translucent ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); // resources.js is an asset loading library ctx.restore(); } } // One type of entity var Shark = function (position) { this.x = position.x; this.y = position.y; this.sizex = 64; ..... ..... this.speed = Math.random() * (120 - 50) + 50; this.monsterImage = "images/Shark.png"; // the url to be passed into the resource.get call }; Shark.prototype = Object.create(MonsterMove2.prototype); function updateEntities(dt) { for (var x=0; x < monsters.length; x++) { var monster = monsters[x]; monster.update(); if (typeof monster.move === 'function') { if (!monster.isDead) { // If entity is alive, chase the player monster.move(dt); } } if (monster.toRemove){ monsters.splice(x,1); // Removes the monster from the array } } Thanks in advance if anyone can point me in the right direction!! This has been driving me mad for a while!

check out my first game based on truly html 4 and javascript https://play.google.com/store/apps/details?id=com.colorcombo.osa please download and rate it and give feedback thanks

Hi there, usually I handle my leaderboards in games with different DOM elements to work with them easily as native elements in smartphones and tablets (creating them with cocoonJS and webview+) Now I have a game that requires more CPU time so I have to use canvas+ but the problem begins with the leaderboards. As I can´t use DOM elements with canvas+, I need to work with them "inside" the proper canvas, but... how do I creat an input field here? Ho do you guys handle this?

Hello, I started working on a game using pixi.js and I'm currently thinking about possible solutions for the user interface. My first approach was to do complete user interface (such as HUD) in pixi.js, but I stumble upon some problems with text: differences of appearance in different browsers (in firefox it looks more sharp then in chrome, also text size measurements seem to be a lit different ) which makes it hard to do pixel-perfect interface. I guess switching to bitmap fonts would solve this but we're going to support Chinese which from my experience requires huge font atlas bitmap (I don't say no but it's a con). Another approach would be to use DOM for that, but I'm concerned about performance on mobile devices when we use some images with transparency on top of canvas. Or maybe I shouldn't worry about that? Also combining both DOM and canvas doesn't "feel" good for me. Maybe you can share your experience on how to handle this kind of problems. Thanks in advance!

Hello all, I reprogrammed my Break The Code game in html5/js. It's a mastermind clone and it uses only css and DOM manipulation for the graphics, so no canvas is used. I used Phonegap to make it available as a free android app. https://play.google.com/store/apps/details?id=com.bdrgames.breakthecode.ads&hl=nl This is the first version of the game, I want to add sound, a better instructions page and different peg shapes in an update soon. Btw the game was already in the iOS app store for quite some time. I rewrote the game so that I could scale/zoom the layout more easily for many devices, and also so I could add a ads banner more easily. So now it's a free game instead of a paid app. cheers, Bas

Hi pandajs experts, How will I add text boxes and other input elements to pandajs? I've read that we can create elements outside canvas. (http://stackoverflow.com/questions/4797748/can-i-put-a-html-button-inside-the-canvas) What is your thought about this? Thanks,

Hi Peeps I used the stuff on Lou's Pseudo 3d page to make a road in CSS - it's just straight and flat at the moment but I thought I'd share for fun. http://catplusplus.org.uk/catpsite/cssracer/ there's a couple of images which need to load so you need to give it a few seconds. on phones it looks better landscape. James Cat Lou's Pseudo 3d page : www.extentofthejam.com/pseudo/

Does anyone know if when you removeChild() on a dom node it's still actually retained in memory? According to the MDN docs it is https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild But I can't find mention of this requirement in the W3C spec, so wondered if modern browsers still actually do this or not? When you removeChild it returns the node, but if you discard it (or don't capture it) I'm wondering if the browser does actually still keep hold of that memory or not. Basically I want to know if it's quite safe to create 1 new dom node for every sprite in my game, or if I should cache/pool them and recycle them instead - keeping in mind I need to target mobile, so I don't want to exhaust browser memory.

Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM. Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Also easily responds to retina display. Try out Collie for fast and easy development, tuned for best performance in various PC and mobile devices. http://jindo.dev.naver.com/collie/