Search the Community

Showing results for tags 'Canvas'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 346 results

  1. Hello, I'm currently developing a FPS and need a minimap. I thought it would be possible to render the scene with a different camera to a second canvas but found no solution. Then I thought an image from above would be enough but BABYLON.RenderTargetTexture can't handle a second camera? What would be the best solution for implementing a minimap in the game? Thanks for every answer, Simon
  2. Hola! I wanted to take a screenshot of my game and download it to the user's device. I have this working, almost except that on my iPhone5s in Safari, the downloaded image is upsidedown. To get the screen shot I use my code below (specifically, the toDataURL() function). On my desktop, the downloaded image is oriented the right way. But not in Safari mobile. I don't have Safari Desktop to try it there, so I'm not sure if mobile vs. desktop makes a difference. Has anyone dealt with this? Know of any work arounds? Thank you in advance! saveCanvas : function () { var link = document.createElement('a'); link.href ='image/png'); = 'Highscore.jpg'; document.body.appendChild(link);; document.body.removeChild(link); }
  3. I'm making a game that need to run on web desktop and mobile devices. At first we were using rendering Auto but we noticed that it was slow on ios. It reached 30fps top on iphone 5. We noticed that auto seem to always choose webgl on ios. On android and desktop it worked perfect. Now we switched to rendering canvas and it works at 60fps on the iphone 5 but we noticed some big, sporadic, slowdowns on Android and desktop. What is the best approach for multiplatform games? Do I need to detect the os of the device? How is this done?
  4. I was wondering is there function in Phaser that will allow me to generate pixel data object from current Phaser Scene (cover the whole canvas or part of it) and pass this object in I don't know which form to the second Phaser Stage and display it as it is at certain position? Something like this: Or I just fall back to plain Canvas API and use ImageData object?
  5. How do I create a 2D image with a texture from image file in Canvas2D? (not an animation from sprite)
  6. kazoo

    Performance Tips

    What are some general performance tips that you would have for newcomers to Pixi? Also what should we really take care of if we want to avoid memory leaks, performance issues, etc. I currently destroy all graphics objects, sprites and textures that I use. I also take care of the stage and the renderer. Also I store references to dynamically created objects in arrays and then clear them afterwards when I need to. However I still see small memory leaks here and there. I use chrome dev tools to identify the leaks.. Also, consider this scenario. I have two pages, and on both of them I have a Pixi canvas with some stuff being drawn. When switching from page 1 to page 2, the whole page 2 throttles, until the Pixi canvas is loaded, although this is just a guess for now. However when I remove the Pixi canvas the page loads, fast, normal.. I am just asking this vaguely, since I haven't looked at what might be causing the issue yet, but I want to have some more input before I start. I do draw around 100+ different graphics elements on the second page.. Are there any ways to improve this loading, rendering time of the second canvas? Also I am running this on a 3rd party device, and that's why I need to be very conservative with memory and performance. When running on PC, I do not see performance issues, however the device is also really powerful, so I would not say this is a hardware limitation.
  7. I'm interested in migrating a game I'm making to PixiJS. Currently I'm using just HTML5 Canvas. I assume PixiJS has fully compatible methods with HTML5 Canvas, since it's its fallback if WebGL doesn't work. So how I would proceed? For example: Let's say I have a drawText function that uses this: ctx.font ctx.fillStyle ctx.strokeStyle ctx.strokeText ctx.fillText And a drawImg function that uses this: canvas[layer].ctx.drawImage(...) canvas[capa].ctx.globalAlpha So I don't load sprites and toy with them. The sprites are loaded, and then I just draw on screen whatever it's necessary in my main loop. My question, in other words, is: Can I replace my main functions with PixiJS functions, or I would have to re-think the graphics logic of my game?
  8. Hello, I have problem with moving player out of Canvas with help of moveToXY function. The canvas size is 400x600 and the tilemap is 2000x2000. When I click on destination point the player is going to destination but he always stop on hidden barrier (Canvas bounds) and can't get further. When I move the player with keyboard he can go anywhere but with mouse click he can't make it. Here is my code in update function: if ( { this.playerX = this.input.activePointer.x; this.playerY = this.input.activePointer.y; console.log("X: " + this.playerX + " Y: " + this.playerY); } if (, this.playerX, this.playerY) > 5) {, this.playerX, this.playerY, 60, 0); }
  9. How can we control engine or canvas screen resolution? Can we with lower resolution get betther Frams per seconds? Can se set fulscreen with resolution 800x600 or 1280x1024 If yes, how can we do it?
  10. Hi Quick question - I am in the process of creating my first game / app ( with PIXI and when I run it in windows and browers everything is fine, when I use phonegap and build it I can run it on my samsung note3 (Android version 5), but not my galaxy tabs (tab10.1 ( Android version 4.0.4) and tab 3 (Android version 4.4.2 ), I just get a white screen. (I havent tried an Apple device as I dont have a developer account to test it) When I use cocoon I get a white screen on all 3 devices, I have tried : PIXI.autoDetectRenderer PIXI.webGLRenderer PIXI.CanvasRenderer but no joy - has anyone else experienced this problem thanks in advance Eric
  11. Hello everyone ! I'm a student in Gamedesign & Programming in Paris and I make games. Video games. HTML5 video games. Using Haxe. So I think I'm in the right place ! It's my first post here, one of my teachers recommended me to share our HTML5 game here ! So here it is, "Fall", made in 4 days within the GameWeek of my school. We were 9 in a team composed with 4 graphists, 4 Gameplay Programmers and 1 Producer. A team entirely made with first and second years ! Check it out here : Fall won the "Most polished game Prize" and will soon arrive on your smartphones ! Have fun guys !
  12. My 2nd game is online. It's a realtime 60FPS HTML5 game with 3D camera running at 60FPS on mobile devices (S3+ / iPhone4s+ / Lumia520+). Give it a try and let me know what you think or may want to see improved. Play it online here:
  13. Trying to add support for mobile. My game is a typing game and I need to bring the keyboard up automatically. I added a text input element in my html with auto-focus and yes I see the keyboard once I load the page but it squeezes the canvas into the space available between the keyboard and the rest of the screen. What should i do to prevent this? The size of the canvas is 480x720. It should look fine on Nexus 7 which is 800x1280
  14. hi there, im trying to erase a part of the bitmapdata canvas ( a blue rectangle) with the mouse. but want to know how i destroy it or reset it to bring the solid rectangle solid again without any holes (made with the mouse) any ideas? i tried .destroy() but seems that doesnt help
  15. I find my self often using console.log() to log for messages while developing which does the job but in the end I should remove all those log statements. So I though it would be nice if I use my own debug text field in Phaser. Yes I made one and it works but how to log messages on screen when all the JS scripts are still not loaded i.e before the game code loads? So, the new canvas API has methods to draw text inside but I don't see the canvas html element being created by Phaser to have its own ID or name. Yes I could possibly do it with custom JS function but are there some tools to help me already? Or I just create separate html element like paragraph and write log messages inside of it and don't bother with the canvas?
  16. gca

    GUI - Html or Canvas

    Hi guys, I'm very new into the game dev scene (1 week new). My idea is to develop games using Phaser and then compile it, using phonegap, for mobile devices. In this scenario - as I see some no-nos in others. Is it bad practice to use html + jquery and gsap to create the gui of the game, instead of the canvas? I bring a lot of experience of dom manipulation into this new venture and I didn't like the way of positioning things around the canvas. Pixels, ew. I was on my way, building a javascript grid based on the phaser api, to mitigate the previous ew-remark, when I remembered good old html. But... standards, and you got to love standards. What's your view on this subject?
  17. Hi guys, I´m working on simple Connect-the-dots game (there are dots on the screen and you have to join them with mouse in order to get some image) and I´m trying to implement pencil, which will draw on canvas. I also need functionality where all what I´ve previously drawn will change the color when the image is complete, that means I need to preserve created data somehow. I´ve already tried multiple solutions I found here and around the internet, but nothing seems to work as I need. I´ve tried this: 1) Drawing with bitmapdata Basically this solution:, the problem is dots aren´t close enough each other when you move mouse fast and also I cannot access previously drawn data in order to change their color. 2) Drawing with, this);, this); startDrawing: function(pointer) { this.drawing = true; =;;, 0xFFFFFF);, pointer.y);, this); }, onDraw: function(pointer, x, y) { if (this.drawing),y); }, stopDrawing: function(pointer, x, y) { this.drawing = false;;, this); }, Here I`ve experienced some serious drawbacks. First, this solution doesn`t work at all in Opera (also I`ve noticed weird behaviour of this example in my browser - the shapes are just blinking or you cannot see them at all) and in other browsers it looks like shapes are closing themselves automatically - that means shape is after each step closed (it is always polygon) and I cannot make path just from the lines - is it correct behaviour of the graphics class? 2) Drawing directly to canvas context through bitmapdata Currently I ended up with this: this.bmd =,; this.bmd.addToWorld();, this);, this); startDrawing: function(pointer) { this.drawing = true; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = 10; this.bmd.ctx.moveTo(pointer.x, pointer.y);, this); }, onDraw: function(pointer, x, y) { if (this.drawing){ this.bmd.ctx.lineTo(x, y); this.bmd.ctx.stroke(); } }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.bmd.ctx.closePath();, this); }, This solution seems to work only in IE, in Firefox and Opera nothing is shown. Could you please provide me some advices how to solve my situation? What is the best way to implement pencil-like behaviour in Phaser? I`ve already spent whole afternoon on this - without usable solution. Thanks in advance!
  18. Hello, I want to convert the coordinates from a mouse click to canvas coordinates. The coordinates generated by jQuery.PEP "pointerdown" event are apparently "world" (browser?) coordinates, they are not canvas coordinates. I am also using the "hit" testing, which is fine for "selecting" meshes. But now I want to engage the canvas for "missed" hits, and respond to those clicks as well. Where might there be a "simple" translation I can use that doesn't involve a "positive" hit? Thank you... Michael Powell
  19. Hi I have a button that I've created from a png image But the hitArea sits outside of the image (even the canvas!) I've uploaded a zip file Hopefully someone can help Thanks
  20. Hello, I've tried a couple different event listeners, to no avail. In a "simple" (i.e. non-ASP.NET) page, it works just fine, engine starts, I can build a scene, no problem. However, when I embed my canvas in an ASP.NET MVC partial, then try and start the engine, I get "WebGL not supported". The script is in the body, renders along with the other partials to Html. Nothing special about that. window.addEventListener('DOMContentLoaded', function() { // get the canvas DOM element var canvas = $("#wizardCanvas"); // load the 3D engine var engine = new BABYLON.Engine(canvas, true); var createScene = function() { // create a basic BJS Scene object var s = new BABYLON.Scene(engine); // connect with partial-provided scene handler (buildScene || (function() {}))(s); return s; }; var scene = createScene(); // run the render loop engine.runRenderLoop(function() { scene.render(); }); // the canvas/window resize event handler window.onresize(function() { engine.resize(); }); }); I've also tried connecting with the onload event. No difference. window.onload(function() { // ... }); Here are my script references, via MVC script "bundles". <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/respond.js"></script> <script src="/Scripts/jquery-ui-1.11.4.js"></script> <script src="/Scripts/ExtensionsJS/str-1.0.3.js"></script> <script src="/Scripts/ExtensionsJS/arr-1.0.1.js"></script> <script src="/Scripts/Oimo.js"></script> <script src="/Scripts/babylon.js"></script> <script src="/Scripts/poly2tri.js"></script> <script src="/Scripts/modernizr-2.6.2.js"></script> Is there something about the server-side MVC rendering that is causing problems? And how else would I know that, per se? Actually, I wonder if it is because my script references are in the incorrect order. I'll try that next. Regards, Michael Powell
  21. Hello, I'm experiencing weird behavior positioning a PIXI.mesh.Rope object using Canvas renderer (PIXI v.3.0.10). I put the rope object in a new container and position the container to a fixed point. Now, whenever I change the Pixel ratio (chrome dev tools) and reload the game, the Rope object inside the container moves around to a different location. The position of both the container and the rope object are still the same (debugged it), but visually the rope object inside the container is not in the same place. Secondly, applying width and height to the rope object will not change anything using Canvas renderer. can anyone please confirm that they have the same issues, or maybe suggest something that could cause this behavior. again, all of this does not occur using WebGL renderer thanks.
  22. Hello guys! So I have a game which is using phaser.CANVAS and what I'm trying to do is the following: When a button is clicked on a particular state, a certain region of the canvas is captured and then displayed it on the canvas at a given location. I've been able to capture the entire canvas using toDataURL() but how do I work with this imageURI? Difficulties: - Cropping the image - Displaying the image without preloading (the image has just been captured) - Saving the image for future use Any input is appreciated. -Kapi
  23. Hello, I'm a completely rookie trying to render a simple line, so I have this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update, render: render }); var line; function create() { game.stage.backgroundColor = '#011052'; line = new Phaser.Line(0, 100, 800, 100); } But it's not working, I mean I can not see the line. Please advice.
  24. Hi! I'm trying to create a Phaser.Sprite using a canvas-based texture (another attempt to connect ThreeJS with Phaser, if you're interested), but I have some issues. My first attempt before doing all of this was forcing ThreeJS render into a Phaser.BitmapData, but maybe you already thinking it was a non-optimal solution (with small canvases works fine, but if you increase the resolution, the perfomance will slow down, aaaaand you're limited to take frames from only 2d-non-webgl context). Faster solutions? Yes, maybe Phaser.RenderTexture was a good idea, but I never find a way how to render a canvas into it. (Since canvas is not a PIXI.DisplayObject). So, after researching a while, I came with the idea of render the canvas more directly to the sprite, doing this ... sprite = new Phaser.Sprite(game, x, y, null); //There's a canvas named "renderHere" where stuff is rendered. sprite.setTexture(PIXI.Texture.fromCanvas(document.getElementById("renderHere"), PIXI.scaleModes.DEFAULT)); ... it works BUT it justs render the fist frame. Yes, I need to update it. I found that in some Github issues, people mentioned that I need to refresh the textures in PIXI doing this: PIXI.texturesToUpdate.push(sprite.texture); But Surprise!: PIXI.texturesToUpdate is undefined!!! . (I'm using Phaser v2.4.6 with Pixi.js v2.2.9 if that's a clue). I'm thinking it is a issue about PIXI versions and such things, but I don't know really. So... Any ideas where texturesToUpdate was? O there's another workaround to refresh the texture? Or there's a direct way to render canvases in RenderTextures? Or maybe I need to quit programming and be a night exotic dancer? Thanks in advance
  25. 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.