Jump to content

Search the Community

Showing results for tags 'dom'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 23 results

  1. 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 h
  2. 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
  3. 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.
  4. 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 inse
  5. 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
  6. Giulio

    DOM to Sprite

    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
  7. 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.
  8. 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 w
  9. 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
  10. 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 an
  11. <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
  12. 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.
  13. 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
  14. 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
  15. 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
  16. 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?
  17. 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
  18. 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 fo
  19. 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,
  20. 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/
  21. 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
  22. 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 cac
  23. 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/
  • Create New...