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
    • 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. Hi! I'm using a drawn rectangle as a mask and I need to delete it after a tween, so I'm using onComplete and then in the callback function 'this.mask.clear()'. Seems to work fine in WebGL, but testing in some browsers using canvas it seems the mask is still there after the animation (other stuff in the function is working, just clear() not working on the mask). Is there any workaround for this? Or any other way to get rid of a mask? Any help is appreciated, thank you.
  2. is an experimental website being built with the vision of allowing people to create and share their own 2D adventures with the world. Basically, what i'm going for is the ability for people to create simple point-and-click adventures by just visiting the site and using the site's web interface, without having to learn any coding. Just share a link with other people to share your adventure. Built-in multiplayer support would be there as well, so people could just drop-in/drop-out with ease. Right now it's just a rough POC. You can't do much with it other than create glorified chat rooms. Here's a test thing i created using the site (it's a little homage to Legend of Zelda): You can poke around the environment anonymously just by visiting the link. As a guest can create your own Link avatar and chat with anyone else visiting at the same time. Creating an account will persist your avatar between visits (admittedly not very useful at this point). I created the whole environment using the website admin tool. Video showing the current admin interface: Site uses HTML5 and web sockets. Any feedback is welcome. Thanks!
  3. Is there anything like "Stage Width and Height"... I am asking because i am getting some weird scaling where the X scale looks like it "real skinny" ONLY when i change the #renderCanvas to try and make 600 x 900 canvas center in page... Centers and looks great but my models look "SQEEZED": For now i get by by just adding a little KLUDGE to the scaling.x by giving it an offset... Should look more like this: Is there some kind of stage width and height and or scaling options we have to set when not using a canvas at 100% Here my my #css: #cvs { position: absolute; width: 600px; height: 900px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; padding: 0; opacity: 0; z-index: 0; outline: none; touch-action: none; -ms-touch-action: none; background-color: #000000; } Anyone Got Any Ideas On This One ???
  4. Hi all... This is my first post on this forum, so tell me if I'm breaking any rules . I've just been getting into html5 canvas game programming, and I'm just making a simple shooter game (NOT space invaders style). Basically, my green square guy (controlled by arrow keys) gets chased by the red square guys. I want to be able to have him shoot them (spacebar) with a little blue square, which I want to fly at them, no aiming required, and then disappear on contact, but none of the code I've tried has worked yet. Just want some pointers on how to implement that. Thanks. Included JS file. game.js run.html
  5. The Example. Hello every body. I have a Canvas with red background. On it I have rows of boxes, which go exactly after each other. Each box begins exactly where previous box ends, and they all have same skew. So there should not be any gap between edges, but as you can see in the example there are gaps. Does anybody knows why is this happening, and how to get rid of it. console.clear(); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var world = { centerY: canvas.height / 2, centerX: canvas.width / 2 } var rowCount = 14; var box = { width: 20, height: 20, skew: 10 } function drawBox(x, y, id) {; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + box.width, y); ctx.lineTo(x + box.width + box.skew, y - 20); ctx.lineTo(x + box.skew, y - box.height); ctx.lineTo(x, y); ctx.closePath(); ctx.clip(); ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray'; ctx.fill(); ctx.restore(); } for (var i = 0; i < 112; i++) { var k = Math.floor(i / rowCount) * rowCount; console.log(k); drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i) } #canvas { background-color: red; width: 800px; height: 600px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas"> </canvas> </body> </html>
  6. ChrisP

    Rooftop Run

    A small 'spacebar' or basic platform game which forms part of a Christmas Marketing campaign. Really simple, just hit space or tap your screen. It's been a tight build, with a very tight timescale, but I'm quite happy with it overall. It's not perfect, and working on a range of devices has been 'fun'. Especially iOS Safari with it's full UI elements :/ I'd be happy to get any feedback and thoughts. Overall I hope it's just a fun couple of minutes distraction! Leave a comment, or if you want, you can find my work twitter (different to my normal twitter) @workhouse_chris
  7. Hey everyone, first post here! I'm putting together a little web GUI using Angular2 and pixi, and I'm looking for a way to have the pixi canvas automatically resize to be inline with its parent element (in this case it's an angular2 component). Below is the angular component that creates the pixi canvas and places it into the DOM. You can see that right now its size is being set to a fixed 256, 256 by the stub methods I created. What I want is the canvas to automatically fill all of the available space of it's parent container when it loads, and also resizes responsively with different resolutions, etc. Similar to the behaviour of the CSS { height: 100%, width 100% } @Component({ selector: 'pixi-component', templateUrl: './pixi-component.component.html', styleUrls: ['./pixi-component.component.css'] }) export class PixiComponentComponent implements OnInit { constructor() { } ngOnInit() { this.generatePixiCanvas(); } generatePixiCanvas() { //Create the canvas and add it the DOM... var renderer = PIXI.autoDetectRenderer(this.getParentDivHeight(), this.getParentDivWidth()); document.getElementById('pixi-component').appendChild(renderer.view); //Create a container object called the `stage` and render it... var stage = new PIXI.Container(); renderer.render(stage); } getParentDivHeight() { return 256; } getParentDivWidth() { return 256; } } Heres a snippet of the HTML in case you want to see it: <div id="canvas-pane" class="flex-item flex-container flex-container-vertical"> <div id="canvas-pane-header" class="flex-item"> <div id="canvas-pane-header-title"> </div> </div> <div id="canvas" class="flex-item"> <pixi-component id="pixi-component"></pixi-component> </div> </div> How can I achieve this goal?
  8. Hello, I just finished writing a small tutorial on how to apply grayscale to an image without using WebGL, and without re-creating all your assets as black&white to show unavailable/disabled/locked modes. You can find it here: If you only want the code and a quick example check out this codepen: Let me know if you liked this technique!
  9. Hello, We are making a game with Phaser and works perfect in all the browsers except in Safari (iPad). It's pretty strange becouse the game seems to be running becouse we can hear the music, but the canvas is not displayed... Few seconds later the game is destroyed... We can't use the remote debugging becouse we don't have any Mac to conect the IPad... (Phaser Version: 2.6.2 / IOS version: 9.3.2) Please help!! Thank you
  10. Hi all, I'm using Phaser and I came across a glitch which is, I think, due to a bug in the PIXI.TilingSprite.protototype._renderCanvas() method. The bug might be linked to a bad restore of the context. In my game, once I introduced tiling sprites, everything started to "slide". So I assumed that adding tiling sprites to the game introduced the "sliding" effect in the context. To prove me right I logged "context.currentTransform" at the start and end of the TilingSprite._renderCanvas() method, and I came across that result : Start of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0} End of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -1255, f: -822} So as you can see the e and f parameters are different. If I do a at the start of the method and a context.restore() at the end, everything works perfectly. Same goes if I hardcode context.setTransform(1, 0, 0, 1, 0, 0); If it helps reproduce the bug, here are the values I have in the method : wt = {a: 1, b: 0, c: 0, d: 1, tx: -1255, ty: -822, type: 24} resolution = 1 tx = -1255 ty = -822 tilePosition = {type: 25, x: 219, y: 0} tileScale = {type: 25, x: 1, y: 1} tilePosition.x = 219 tilePosition.y = 0 this._width = 4200 this._height = 2400 I'm not a Pixi expert (first post in this section!), nor in canvas/context, so I'm sorry for any mistake. Also I hope this has not been flagged already! Thanks guys!
  11. Hi, it is my first post in this forum because I have a question with no answer. I have to draw differents spheres which represent the location of some cities (coordinates UTM). Firstly I have done the conversion to x,y pixels on screen. However after apply the ecuations the sphere doesnt appear, so the question is: which is the reference system that BabylonJS uses? If I define the positon of sphere for example position.x=8, it appear in the limit of screen.What is the meaning of the value 8? Thanks, JuanMa.
  12. Greetings, When adding CSS border-style or padding to the canvas element, I found that the hit zones of dragged objects shift off the sprite, presumably in proportion to the CSS values. Below code shows this error (FF & Chrome). For test.png I used a 100x100 square. If you try to drag the sprite while the mouse pointer is directly over it, it won't move. Move the pointer outside & to the left of the sprite & you'll be dragging it. Even with setting: this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE; this.scale.pageAlignHorizontally = false; this issue still occurs. I came to this, because I wanted a border or side alley to the left & right of the game canvas in a different color. It seems Phaser hijacks the entire width & adding padding to wrapper divs showed up outside the entire width, not next to the canvas element. Anyone know a way to control the padding outside & to the left/right of the canvas element that Phaser creates? Thank You! <html> <head> <script src="assets/js/lib/phaser.js" type="text/javascript"></script> <script> window.onload = function () { var game = new Phaser.Game(768, 1024, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function preload() { console.log('Hey World');'test', 'assets/img/test.png'); } function create() { this.test =,, 'test'); this.test.anchor.setTo(0.5, 0.5); this.test.inputEnabled = true; this.test.input.enableDrag(); } function update() { } }; </script> <style> canvas { border-color: #ffffff; border-width: 3em; border-left-style: solid; border-right-style: solid; border-top-style: none; border-bottom-style: none; padding-left: 3em; padding-right: 3em; } </style> </head> <body> <div id='game-wrapper'><div id='game'></div></div> </body> </html>
  13. Hello, A complete newbie here. So, I selected my project within 3 weeks as " Mario like game with level editor" for my college and can only use plain javascript and nothing else. I have done some research and i found that i have to make it on canvas. My logic was to first create a json data and render the map from that and make it playable. Then make an editor where the user can drag and drop tiles which after finished creates a json data, from which the game can render from. But, how do i start on this? Any guidance? How do i render the json and provide collision detection. Also, how to let user create their own level and create the json data. Help is much appreciated, Thank you!
  14. Hi people, I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't. My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected. Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ? What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, and from that canvas (renderer.view) get the 2d context and get pixeldata.. // create separate canvas and canvasRenderer for this pixel mapvar canvasStage = new PIXI.Stage(0x000000);var canvasRenderer = new PIXI.CanvasRenderer(1024, 598, null, true);// create a texture that holds the mapvar texture = new PIXI.RenderTexture(1024, 598, this.canvasRenderer);texture.render(map);// create a sprite on our separate stage, otherwise the texture won't be renderedvar textureSprite = new PIXI.Sprite(texture);canvasStage.addChild(textureSprite);// render the stagecanvasRenderer.render(canvasStage);after that is done, I can use this to get my pixels var pixelData = canvasRenderer.view.getContext(("2d")).getImageData(posX, posY, 1, 1).data;Is this the correct way to do it? or is there a better way? regards, Martijn
  15. Hi everyone. I'm creating a game and I was testing it into different browsers. I always use Chrome for my tests and everything is fine there. I tried on Edge and it works perfect as in Chrome. Then I opened it in Firefox and there's a problem. It opens the preloader, the mainMenu page in which there is the name of the game and two buttons, but as I try to click on the "play" button, which brings me to the actual game, I have no answers. When I open the page I get these messages in firefox console log: I think the WebGL error is a Phaser one, because I use CANVAS in my game: (in index.html) var game = new Phaser.Game(800, 600, Phaser.CANVAS,''); And I guess that the "mozHidden" etc line is just a warning. So that TypeError must be the issue. What is the problem with those lines? What am I doing wrong with the instantiation of my game? Is it a problem that I use prototypes for my game like: (in Level1.js) Game.Level1 = function(game) { }; Game.Level1.prototype = { preload:function(game){ //... }, create:function(game){ //... } }; ? Oh, and I tried opening the game in the Firefox safe-mode, without the additional plug-ins, and it works like it should be. Any help would be really appreciated! Thank you very much. EDIT I tried deleting the cache on Chrome and Edge and it doesn't work immediately even there, giving me some phaser errors like the ones before. But no error about my code. And if I refresh the page several times, like 4 or 5 or more, it begins working again like it should. What could this problem be due to?
  16. I'm creating a photo manipulation 'game' using Phaser. The user needs to upload a file from their device (desktop, iOS, Android) to start. Searching, I find examples where <input type="file" name="pic" accept="image/*"> transfers the image into the Phaser canvas. And CanvasInput.js works if you only have a text field. But is there any way to get file upload (and file save locally, for that matter) type input from within the Phaser canvas? I want these input fields within the game canvas itself.
  17. Hello gamedevs! Just posting to show off my JS13k entry, Super Glitch Box. An homage to one of my favorite freeware games, it features fun glitchy visuals, stereo sound effects, original music and procuedurally generated weapons.
  18. Hey, check out my new game "" Its a multiplayer top-down shooter with pixel art graphics. Its free and requires no registration so you can play straight away. Its still in developement, but perfectly playable. It plays a bit like classic shooters like UT or Q3, with the difference of beeing top-down instead of 1st person of course. You run around in an arena, pick up ammo and health kits and shoot enemy players. Currently there are 3 game modes: Deathmatch, Team Deathmatch and CTF and a bunch of maps for each mode. There are also abilities and attributes which you can pick to customize your character. Id love to get some feedback and of course i can answer any questions.
  19. Hey guys, can we get the whole game as canvas and then convert to sprite?
  20. Hey guys, Just wanted to show my little in-development game engine. I decided to create my own engine as Panda.js didn't got any updates for several months. The goal here is to have a lightweight but powerfull game engine with awesome performances, whatever the device is (ie. Android) while being able to use Canvas+ (so, no DOM is used as Canvas+ doesn't supports DOM). What I've already done: Game config via `config.js` file ; Game scenes ; Ultra-customizable Sprite class that allows to modify everything drawing related ; Mouse events support (click, move, hover, down, release, out) and Drag & Drop support ; Built-in physics engine (made on my own, so a bit hacky/buggy but I plan to fix these issues :p) ; Only redraw what needs to by using a simple variable on every scene children: `needsUpdate`. What I want to do: Implement built-in networking to allow multiplayer games/apps ; Implement UI elements like Text, Buttons, Scrollable panels, Inputs to allow devs to make real Canvas UI ; Fix the overall bugs ; Add some helper classes ; Maybe implement SAT.js for collisions detection/solving ; And finally, build the game I started this engine for :). So this is an "ambitious" project that aims to allow doing things other engines wasn't able to offer me. Source code (Gitlab): Demonstration: Feel free to contribute to the code, open issues if you find them, create issues for suggestions too. Or simply leave a message here. Thanks for reading, I hope I'll be able to drive this project the right way.
  21. Hi, How important is it, that HTML5 games still support fallback renderers in case webgl isn't available? Do you have any data how many systems are out there that doesn't support webGL at all? What do you think.
  22. Hello, Because of performance and blurry text/image issues, I turned my fixed canvas resolution to a canvas with width/height dynamically equal to window.innerWidth/Height on resize. Admitting the same aspect ratio after resizing, how would you deal with the renderer to keep the same viewport ? Thanks.
  23. We're coming to a point soon where most recent browsers on mobile support WebGL and am thinking about axing the canvas renderer to further minimize phaser build size. I don't see a way to exclude the canvas renderer in a custom build... I realize it's part of pixi and maybe that's why it can't be separated out, but just wanted to know for sure if it was not possible. Thanks
  24. 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?!
  25. I have utility functions and lot of them are just drawing to object. Some of them have rather complex behavior, like calculating some values to see if something should be drawn or not. The problem is these function can accept large number of different values so I should be testing them. An example function: drawShelve: function (dataObject) { var halfHeight = this.roundNumber((dataObject.frameHeight / 2), frnConst.BETTER_PRECISION), halfRearHeight = this.roundNumber((dataObject.rearHeight / 2), frnConst.BETTER_PRECISION), grObject = null, shelve = { graphicsObj: dataObject.graphicsObj, borderSize: constGr.DEFAULT_GRAPHICS_BORDER_SIZE, borderColor: dataObject.borderColor, borderAlpha: 1, areaColor: dataObject.areaColor, frontColor: dataObject.frontColor, thickness: dataObject.thickness, polygon: { pt1: {x: 0, y: 0}, cp1: {x: 0, y: 0}, pt2: {x: 0, y: 0}, pt3: {x: 0, y: 0}, cp2: {x: 0, y: 0}, pt4: {x: 0, y: 0}, pt5: {x: 0, y: 0} } }; // draw top corner shelves if (dataObject.shiftY >= this.roundNumber(dataObject.y + dataObject.halfCupboardDepth, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY < this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve = {/* some code */}; grObject = this.drawShelveWithArea(shelve); // draw rectangle instead of full shelve when exact half is hit with a Y coordinate } else if (dataObject.shiftY === this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { grObject = /* draw rect code here */; // draw bottom corner shelves } else if (dataObject.shiftY > this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY <= this.roundNumber(dataObject.y + halfHeight + halfRearHeight, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve.polygon = {/* some code here */}; grObject = this.drawShelveWithArea(shelve); } return grObject; } As you can see, there is if block and then two else-if blocks. All conditions are calculated and I must test if the shelve is drawn or not for different values, i.e not null. I set QUnit and added game object where can i draw with HEADLESS mode, but from the following picture I still see canvas added to my test page. How can i test without adding game object at all? Is it possible to utilize functions like: shelveWithArea.beginFill(dataObject.areaColor, 1); shelveWithArea.moveTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.bezierCurveTo(polygon.pt3.x, polygon.pt3.y, polygon.cp2.x, polygon.cp2.y, polygon.pt4.x, polygon.pt4.y); shelveWithArea.lineTo(polygon.pt5.x, polygon.pt5.y); shelveWithArea.lineTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.endFill(); Without a need of Phaser.Game object?