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
  • 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 349 results

  1. Hi, I have encounted something strange and I don't know how to fix it. I have git cloned the examples page onto a local webserver and the plugin projection, 3D Camera spine layers works fine. But when I try to reproduce it into my electron app, the layers start acting like this. How can I fix this? I've tried everything, why does it work on the examples html page but not on my html page. thanks!
  2. Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: experiments:
  3. Hi guys I met a very difficult problem, this problem has been bothering me for more than a month My game sometimes has a part of the image rendering can not come out, but its alpha channel rendering is no problem I have no idea about this problem. Does anyone know what caused it? here's my problem: I'm using: phaser 2.13.3 with CANVAS mode dragonbones 5.6.2 electron 5.0.11
  4. Hi everyone, I have a picture that I draw pixel by pixel on the canvas. Size of the image: 512 * 256. When I make this picture 1536 * 768, the image looks very bad. I think I can use interpolation to fix this. But I couldn't find a good javascript library. It didn't work in the libraries I found. Is there anyone who can help me with this?
  5. I am trying to add Lottie animation in the Phaser 3 in my game. But I am not able to add. Lottie Animation link. This is how I am adding into my code : this.animation = bodymovin.loadAnimation({ container: document.getElementById("game"), // Required path: "assets/json/RainLoop.json", // Required renderer: "canvas", // Required loop: true, // Optional autoplay: true, // Optional name: "Hello World", // Name for future reference. Optional. }); But here problem is, this animation is attaching to the HTML DOM elements and so that the animation comes above the Phaser game canvas, Due to what I am not able to interact with my phaser game elements.
  6. I have recently discovered a couple of useful pages about improving the speed of canvas operations. I will give links to those pages at the bottom of this item but first let me describe a good speed-up I got as a result of reading them. In my program The Forest ( I am continually looking for ways to improve the speed of drawing scenes. I have made several improvements already but this new one is very useful indeed. I have a Scene object with method draw() which is invoked whenever the observer moves or turns. From its earliest incarnation this method has reported how long it takes, so I can monitor what is going on. Its first line is var t0 = new Date ().getTime (); // ms and its last line calculates a difference and displays it in a status line on the HTML page: var dt = new Date ().getTime () - t0; forest.infoDiv.innerHTML = me.toString () + ", Drawn in " + dt + "ms (" + this.nDrawIms + " images)"; I have augmented that so that the constructor of forest.scene includes this.drawingTimes = ''; and a new final line at the end of draw(): this.drawingTimes += dt + '<br>'; I can cause drawing of the same scene over and over again by clicking a button labelled 'Look level' (as opposed to up or down buttons which would draw a slightly different view of the scene). This means I can build up a long string of forest.scene.drawingTimes. Then in a testing version I can press an otherwise unused key to dump those times as the innerHTML of a div in my HTML test page. The <br>s mean that I get a vertical column of values which I can then select, copy and paste into a spreadsheet (I use OpenOffice). Then it is easy to get the mean and standard deviation of the column. I did that twice for a large number of values. First with my last released version of The Forest and then with a tiny enhancement so that just before every time drawImage(im, x, y, width, height) is called I do this: x |= 0; y |= 0; Those are bitwise OR operations and their effect is simply to chop off the fractional parts of the screen coordinates x and y. This means that drawing starts on an exact pixel and does not require interpolation. The results: without the truncation (ORing) the mean time was 140.9ms with a standard deviation of 35.3ms; truncated the mean was 85.7ms and standard deviation 23.7ms. That is a very significant and useful improvement, so it will be going into my next version. The scene drawn here involved 1,693 calls to drawImage(), scaling each image (tree, ground, and other features) differently each time. From this big improvement I deduce that once drawImage() starts on an integer pixel then it uses integer pixels in the destination to decide where to get pixels from in the original image for scaling. In hindsight this is rather obvious really but I thought it would be useful to others to see how I went about proving the effect. I have noted before in this forum that the drawing time varies quite widely (as shown by the standard deviations) and I still attribute that to the workings of the garbage collector in the background. I should also point out that so far I have only measured this in FireFox. If you want to see more clearly what I am taking about, The Forest is at - from the initial map use the button (or key) to go to the scene. The pages which prompted this are:
  7. Hi, I'm a designer and I'd like to reach out to others for input or even collaboration. Lots of my javascript work is on github in the spirit of sharing and learning together. Like an open source sketchbook. I like making small experiments that might be included in something bigger. I often play with mechanics, audio and visual elements to look for interesting things : As you can see, it's lots of generated, three.js and canvas stuff, with a game dev leaning. I'm keen to go in new directions too. It's hard to find interest among my social circles, so I'm reaching out here to see if people are into this kind of thing. It's not business. It's about hitting ideas off each other, collaboration, fun and learning together. Maybe we can make an page if there is the will. You're welcome to join the discord server : I'd love to see your experiments. Here or on discord. Things that aren't full games, but are fun and interesting concepts. This seems the place to look for like minded folks. Have you got a sketchbook? Is there a good CMS for this? I might be doing it wrong. Are there any other communities for this apart from discord servers full of revshare projects?
  8. My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  9. Hi everyone. For the last few months I’ve been working on a simple HTML5 2D side scrolling action game called Theraxius. It's nothing new and revolutionary, it's more like an evolution of different technology. The game also includes a level editor so you can create your own levels. Engine (all game logic and level editor) is written completely in JavaScript, no download is required. Just load and play. Level data (stored in JSON format in the database) is exchanged thru Ajax calls. Server side is written in PHP. All images and sounds are preloaded from the server before play. The game uses HTML5 features like canvas, Fullscreen API, Pointer Lock API, Audio,… At this moment only Chrome and Firefox are supported. The game is meant to be played on PC, phones and tablets are not supported. In the next weeks I’ll try to post some videos, try to add registration (for newsletter and later for public test). Release date: when it's done Official page: Screenshots (for bigger images, please visit official page):
  10. Hi Everyone, I want to create same thing like this in phaser 3 using graphics library or by any other way. I cannot find compatible code for replacement in graphics library. Any help will be highly apprecited Many Thanks
  11. Hi all, I am doing a test to a client who ask me to build a dynamic using a sequence of 3D rendered images, I told him than that is not the right way in WebGl, the correct is to convert the 3D objects and use than. But he said than right now they can not do that. So I tryed to use Dynamic Texture with canvas method and it works, but I wanna know if somebody knows a way to preload the sequence of images in BJS, to get better? Because I think that has a delay right now about the loading issue. You can see it here Thanks
  12. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  13. Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset ='tilemap'); // # Add Tilemap Layers this.config.layers.background =, tileset); this.config.layers.midground =, tileset) this.config.layers.ground =, tileset); this.config.layers.forground =, tileset); this.config.layers.water =, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]);[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m =;, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
  14. Hello everyone! I'm trying to accomplish the following task: - When there is a change of state I want to take a screenshot of the canvas, show to the user while the state is changing. Now I read that I should use canvas.toDataURL to obtain the base64 encoded Image. I can't understand the steps to accomplish this task. 1) I save the URL with canvas.toDataURL(). 2) I should convert the base64 to an image right? 3) I should add the Image to the cache OR i Should do a load.image? 4) The operation should be async right? Because in my trying the debugger console is saying that the image hasn't been retrieved and I don't understand how I can make toDataURL (or the conversion from base64 to png) async because there are no methods. Thanks for the help!
  15. Hi, I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. Thanks in advance. var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); var element = document.getElementById('gameCanvas'); element.appendChild(app.view); var basicText = new PIXI.Text('Basic text in pixi'); basicText.x = 30; basicText.y = 90; app.stage.addChild(basicText); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); richText.x = 30; richText.y = 180; app.stage.addChild(richText);
  16. Hello, I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen. The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes: Just click the button to apply/remove the tint and you'll see the issue. Why this happens?, is there a way around this or is just what we get in canvas? Best, Rodrigo.
  17. How to make click Pixelperfect on Canvas DEMO + Tutorial Summary There is no easy way to draw something and capture a pixel perfect click on it with HTML5 canvas. But there is a trick! We can attribute a random color to each Sprite we create then on a new blank buffer canvas, draw all sprites but only with their respective colors. Capture mouse input coordonates on real canvas then look the color of the pixel on the buffer canvas then compare this color with your sprites. If colors matches you clicked on this sprite! Tada! Real pixel perfect inputs! Initial Setup I took 3 sprites. So Basically here, we have a Main class which have an Array of Sprite(x, y, img) instances: this.sprites = [ new Sprite(100, 100, this.imgs.bed), new Sprite(52, 146, this.imgs.table), new Sprite(80, 135, this.imgs.z) ] I had to set coordonates to make those sprites overlaping each other The class for Sprites is pretty simple: export default class Sprite { constructor(x, y, img) { this.x = x this.y = y this.img = img } render (ctx) { ctx.drawImage(this.img, this.x, this.y) } } For this example i didn't add a z or depth property to Sprites, we admit in this example that Sprites ordering is made by their position in array. I set up a time loop to call render which call render on each Sprite: setInterval(() => this.render(), 1000 / 30) ... render () { ... this.sprites.forEach( sprite => { sprite.render(this.ctx) }) } Result: Real things coming up First we need to generate a random color for each sprites and make a new method to render the image but with only one Color. constructor(x, y, img) { this.x = x this.y = y this.img = img ='img-', '') // Return 'bed', 'table' or 'z' = Math.floor(Math.random()*16777215).toString(16); // Return a random HEX Color console.log("Created '" + + "' with color #" +; //We want here to see what color is generated for this sprite } Console returns Now we want to create a method renderColor with a canvas buffer, So we just need to create a canvas with img sizes, fill with generated color then drawImage with destination-atop composition. renderColor (ctx) { var buffer = document.createElement('canvas'); buffer.width = this.img.width; buffer.height = this.img.height; var bx = buffer.getContext('2d'); bx.fillStyle = '#' + bx.fillRect(0,0,buffer.width,buffer.height); bx.globalCompositeOperation = "destination-atop"; bx.drawImage(this.img,0,0); ctx.drawImage(buffer, this.x, this.y) } For debug purposes we can now see the result if we update the render to render those colors sprites: render () { this.sprites.forEach( sprite => { sprite.render(this.ctx) sprite.renderColor(this.ctx) //DEBUG }) } Which give us this result: Create a global buffer for all this color sprites in Main constructor and render color sprites to it instead of the real canvas this.inputCanvas = document.createElement('canvas') this.inputCanvas.width = this.canvas.width this.inputCanvas.height = this.canvas.width this.inputCanvasCtx = this.inputCanvas.getContext('2d') ... render () { this.sprites.forEach( sprite => { sprite.render(this.ctx) // Previously: sprite.renderColor(this.ctx) sprite.renderColor(this.inputCanvasCtx) }) } then add an event listener to the real canvas and get pixel informations on the buffer canvas this.canvas.addEventListener('click', event => { let color = this.inputCanvasCtx.getImageData(event.layerX, event.layerY, 1, 1).data }) Convert the color data to HEX, and just compare with existing sprites! this.canvas.addEventListener('click', event => { let color = this.inputCanvasCtx.getImageData(event.layerX, event.layerY, 1, 1).data let hexColor = ("000000" + this.rgbToHex(color[0], color[1], color[2])).slice(-6) console.log('You just clicked on color #' + hexColor) let sprite = this.sprites.filter(sprite => === hexColor) // You now have the sprite yea! }) ... // RGB Util rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component" return ((r << 16) | (g << 8) | b).toString(16) } Console returns You now have your clicked Sprite! Thanks you guys for reading, hope this can help someone! Léo DESIGAUX Link to the Project Link to my Website Link to my Twitter Link to my Linkedin
  18. Which is the best way to paint the canvas with an input Fragment shader using BABYLON? Not a mesh but directly the canvas itself. I could set up an ortographic camera and a plane in front of it, but that's... just bad. Thanks in advance
  19. Hi guys, I'm new to this and I have an issue in my current working project(it's first in phaser). I want to know how can I zoom in the game when it's opened in a mobile browser? The game is too small and I want to zoom and slide the whole canvas in the browser window. I can do this from outside the canvas but I cannot drag then from the canvas itself. Please help! Thank you.
  20. Hi everyone! With the help of Phaser 3 I introduce... Free Rider Jumps! This is using the facebook messenger platform. The first instant game by Kano . Available on desktop, and mobile . Its a single track. Goal is to get the best score you can. You earn points by going the distance and doing it with style by doing tricks! Mobile & Desktop on Messenger Search "Free Rider Jumps" or try Desktop Only on FB Still some work to do on it, like music / sounds, but the bulk of what we wanted is there. Feel free to give feedback / ask questions.
  21. Hi, I'm using Pixi since several days on a game prototype which consists in a map made of tiles. The problem is that I got a big map (2000px / 2000px), so it don't fit a desktop screen, and not any mobile screen. I am looking for a way to allow the user to pan (i.e. navigating on the canvas with mouse drag and drops (for desktop) and with the finger (for mobile devices) zoom in / out the canvas Like in google maps for example Any idea of an embedded feature I can use? Thanks in advance for you answers.
  22. gtibo

    small games

    Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Marble labyrinth Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link : 5/ Taxi Apocalypse Created NOVEMBER 06, 2017 Link : 6/ key Sprinter Created August 18, 2018 Link :
  23. Hello, found this solution for creating video. but this result video is faster than runtime animation. thought that _alpha variable usage is strange, so tried milliseconds controls but not easy for me. in my opinion every 1000/fps milliseconds, to render and to capture are correct. but it makes more speedy video any advice? ps. i solved using CCapture. but video quality is not good. function record() { scene.getEngine().stopRenderLoop(); render() } function render() { requestAnimationFrame(function() { scene.render(); capturer.capture(scene.getEngine().getRenderingCanvas()); render(); }); }
  24. Hi Guys, We have urgent requirement for Html5 Game Developer for Slot Game Technical Skills: • HTML5, createjs and Javascript expertise for Desktop/Mobile games • Canvas- programming (Multi Layer). • WebGL API for 3D graphics and animation. • Mobile events and device orientation. • Performance optimization techniques and run time performance improvements on mobile devices. • Ajax, Websockets & Web Workers, I/O, NodeJS and server-sent events. Kindly share your portfolio link and resume on this email- Thanks Pankaj Singh
  25. Hi, I'm so happy to introduce you BIOK! BRIEF DESCRIPTION BIOK is pure strategy and intuition. A board game for the ingenious and the acute minds. Lead the creatures on the playing field to capture monsters and all kinds of items. Watch the monsters’ eyes and guide them to their preys. KEY FEATURES - Simple controls and fluid mechanics, super simple to understand and fun to use - 60 levels in many worlds with various maps - 10 creatures with different characteristics and abilities - Bonus and survival mode to solve puzzles and challenges - Special objects and environmental elements - Secondary missions and hidden objectives iOS - AVAILABLE Get BIOK from the Apple App Store ANDROID/WINDOWS - BETA You can access the beta: BETA ACCESS (remember to use your google account) MORE ABOUT BIOK You can read more about on the official BIOK game page. FOLLOW US Send us any commend and advice. Help us to make a better game. Facebook | Twitter | Web