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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 261 results

  1. Hi everyone... I'm making a simple HTML5/JS program I plan to integrate into an existing game I have that is supposed to load an explosion sprite from a sprite sheet I created (375px by 25px, each individual sprite is 25px by 25px, 15 sprites total) onto the HTML canvas. It is not yet animated, as I haven't been able to make it actually show up (this is my problem) I'll leave the code below, if you see what's causing the problem, please leave a reply with a suggestion on how to fix (that would be really helpful as I have been making zero progress in the past hour). Thanks in advance! If it helps, I have been using code from this tutorial here: <html> <body> <canvas id="exploder"></canvas> <script> var canvas = document.getElementById("exploder"); canvas.width = 25; canvas.height = 25; var explosionImage = new Image(); explosionImage.src = "ExplosionFinal.png"; var explosion = sprite({ context: canvas.getContext("2d"), width: 25, height: 25, image: explosionImage }); function sprite(options) { var that = {}; that.context = options.context; that.width = options.width; that.height = options.height; that.image = options.image; that.render = function() { // Draw the animation that.context.drawImage( that.image, 0, 0, that.width, that.height, 0, 0, that.width, that.height); }; return that; } explosion.render(); </script> </body> </html> And when I run this in Chrome nothing is showing up in the canvas element. As far as I can tell it isn't an error with sourcing the file as when I hover over this statement here: explosionImage.src = "ExplosionFinal.png"; my text editor shows a preview of the file, with the sprite sheet showing.
  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 there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!
  4. Hi all... I'm programming a simple JS canvas game and I have a couple questions about two bugs I have noticed. I'll attach the game's code so you can play it and see visually what I am talking about. The first bug, which you will definitely notice when you start moving around (use arrow keys), is that the player (green square) seems sort of fuzzy/compressed on the side that is on the direction they are travelling. This one I have absolutely no idea as to what is causing it, but it doesn't seem to happen on the enemies. If anyone has any ideas about what's causing that or how to fix it that I would love to know. The second one happens when you shoot (use WASD keys) while moving. The rocket (blue square - my graphics are stunning) seems to make a curved triangle sort of shape (sort of hard to describe), like it is accounting for the movement of the player and when it exits the canvas it seems to be fully corrected as far as I can tell. I want it to instead shoot straight while my player continues onward in the direction they are going. If anyone can tell me what is causing these bugs and/or how to fix it that would be great! Thanks. The files: run.html game.js
  5. I build my sprites from a canvas object I created, which is bascially a circle with a radius at most 28 pixels. I built it with Canvas API. Then I use Texture.fromCanvas(canvas); Then Sprite.from(texture); However when I try to watch the sprite's width and height, I get 300 and 150. I wonder how are these two values calculated. What I need is a sprite as big as 30 x 30 at most. Why does it give me a 300 x 150 sprite? If I need to do some hitTest check I can't use the sprite's width and height directly. I have to use the radius of my canvas object.This is very inconvenient.
  6. Hello everyone, Hope you are doing good. Do you know any text effects library leveraging the canvas API? I am looking for something providing shadow/border customizations, little animations and other effects already available within the DOM. Actually FabricJS does that but I find it too much for what i want to do. Any ideas?
  7. Hello, I am new to this forum and first want to thank for a lot of helpfull posts! Maybe someone can help me with this one: I've started with (I believe created by iiceman, thanks!) and tried to use fabricjs to paint on the canvas. To allow user interaction I've send the events from the Bayblonjs canvas to the fabricjs canvas translated like this: var pickResult = scene.pick(scene.pointerX, scene.pointerY);var texcoords = pickResult.getTextureCoordinates(); if (texcoords) { var clicked_x = texcoords.x; var clicked_y = texcoords.y; var posX = (clicked_x * textureWidth) | 0; var posY = (textureWidth - clicked_y * textureHeight) | 0; var rect1 = canvas.upperCanvasEl.getBoundingClientRect(); var clientX = posX + rect1.left | 0; var clientY = posY + | 0; var evt = document.createEvent("MouseEvents"); evt.initMouseEvent(name, true, true, window, 1, screenX, screenY, clientX, clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, canvas.upperCanvasEl); return evt;}I was surprised that this works. Sorry i didn't figured it out how to make a playground example with fabricjs, instead I have an example here: But my problem is that it is smooth in chrome, slow in firefox and IE, unusable in Mac Safari. Does someone have a idea how i could get better performance? The Part where the texture get updated is only called when the underlying fabricjs canvas changes: canvas.on('after:render', function () { UpdateTexture();});best regards, Lothar
  8. Hello people, I’m here to ask for assistance on PixiJs (more like a canvas related stuff) and IOS. I want to make an app than take all the available space of the webpage, kinda “Fullscreen” but not necessarily without the actions bar of the browser, What I was doing work pretty well on any browsers except in Safaris IOS browser, in landscape mode (sometime loading the page the first time in landscape work, then when changing orientation and coming back to landscape make the bugs appear). I can’t get to handle the IOS browser correctly, the canvas ignores one or both of the browser bar, causing it to appear under these bar. I just adapted quickly the Pixi’s “bunnymark” demo to show this problem. ( ). I found on the web an example working really fine on iOS landscape mode ( but can’t see an obvious differences with my simple example. It may be an HTML/CSS problem, but I can’t find it exactly. Thanks for your help and have a nice day.
  9. 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.
  10. 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!
  11. 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 ???
  12. 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
  13. canvas

    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>
  14. The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
  15. 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
  16. 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?
  17. 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!
  18. 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
  19. 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!
  20. 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.
  21. 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>
  22. I have been testing my game on mobile using the chrome remote debugging for Android. With auto/WebGL I was around 48 frames a second. With Canvas close to 59 FPS. Preceived heat was lower as well. One annoying thing is a strange flicker, most notiable on text and buttons. See Gif for example, quality is kinda low, ignore that. Any idea how this could be fixed? It doesn't happen in WebGL
  23. 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!
  24. 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
  25. 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?