Search the Community

Showing results for tags 'dom'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 17 results

  1. 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.
  2. 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
  3. 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 =)
  4. <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.
  5. HTML 5 Games Developer

    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.
  6. 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: N.JHAKRA@JEFFERSONWOLFE.COM Job Type: Full-time Salary: £70,000.00 /year Required education: Diploma/Certificate
  7. Javascript / canvas game memory leak

    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!
  8. 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?!
  9. 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
  10. 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?
  11. User interface pixi vs dom

    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!
  12. 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,
  13. 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
  14. CSS2/DOM psuedo 3D road

    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/
  15. The DOM isn’t slow, you are.

    Edited post-HN: Wow, big response! WARNING: May contain traces of opinion, and naughty words like ‘shit’ and ‘internet explorer’. TL;DR: Use jQuery for what it is meant for, not everything. If you do stupid shit with the DOM, it will perform poorly. If your web-app is slow, it’s because of your code, not the DOM. Whenever the native versus web argument arises, the biggest issue people usually have with web is performance. They quote figures like ‘60fps‘ and ‘scroll speed’, and, back when browsers were just getting good, i would say “OK, there’s work to be done, but they will get there”, which was met with anything from “Yeah maybe” to “No it will never happen!”. http://blog.korynunn.com/javascript/the-dom-isnt-slow-you-are/
  16. 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.
  17. 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/