Search the Community

Hi, Context I'm building a 2D game from scratch in JS. I'm drawing the map by using rpgmxp tilesets for the moment just to have some resources : Each tile is 32*32 pixels. I'm using canvas API with ctx.drawImage method to display it : ctx.drawImage(tile.tilesetImg, tile.sX, tile.sY, this.tile.w, this.tile.h, canvasX, canvasY, Engine.Camera.tile.w, Engine.Camera.tile.h); I use different parameters for the image source size (this.tile.w & this.tile.h) and the image destination size (Engine.Camera.tile.w, Engine.Camera.tile.h). This has the effect of scaling the game, like that each user have the same map exactly displayed (32 tiles * 24 tiles). The current tile aspect ratio distortion doesn't matter to me for the moment. Check 1.png to see the result displayed to the player with a 4:3 ratio. Problem When I change window size if I don't keep the ratio 4:3 (because i display always 32 tiles * 24 tiles for the player) one of my tile types causes strange visual artifacts. This happens in chrome and firefox and probably all browsers. It's strange because all the other tiles are drawn from the same method, but do not exhibit this behavior. This behavior only seems to occur when the ratio is very different from 4:3. See 3.png to check what i'm talking about. There is some transparent lines which display the background at the right of each "bad" tile. Note this tile happens to be the first tile from the tileset (first image above). The same thing happens if height alone is changed, except the line will appear on the bottom instead. The thing which is again more strange is that if i change the tileset to draw a red line at the right of the first tile (check 4.png) the transparent line is replaced by the red line when drawing the map (check 5.png). Question From debugging (console.log), there doesn't apear to be any reason that tile source size would be 33px instead of 32px, but the artifacting effect makes it seem like this is the case. I appear to be using drawImage correctly by all accounts, so googled to see if this was a known problem. I was reading the w3 documentation https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas when I found that : (especially the last note of part 12) Does this explain the problem ? Does any one know what the problem is more in detail ? Thank you in advance, best regards.

Hey everyone, So I'm testing a game on IE 11 in Canvas mode and I get the following error about every other time I refresh the page: SCRIPT5022: IndexSizeError File: phaser.min.js, Line: 12, Column: 1746 The phaser code at the problem location is: this.context.drawImage(a.texture.baseTexture.source,a.texture.frame.x,a.texture.frame.y,a.texture.frame.width,a.texture.frame.height,a.anchor.x*-a.texture.frame.width,a.anchor.y*-a.texture.frame.height,a.texture.frame.width,a.texture.frame.height) Sometimes I can load up the game fine, but if I refresh I get this error. Any ideas?

I am making a game with skins in it. When ever player changes a skin Images gets loaded again. I use this code. preload: function () { this.load.image('arm', 'asset/Theme'+this.theme+'/arm.png'); this.load.image('leg', 'asset/Theme'+this.theme+'/leg.png'); this.load.image('head', 'asset/Theme'+this.theme+'/head.png'); this.load.image('torso', 'asset/Theme'+this.theme+'/torso.png'); } gameFunction:function() { if(this.themeChanged) { this.theme = this.newTheme; game.lockRender = true; game.load.onLoadComplete.add(this.preloadComplete, this); this.preload(); game.load.start(); } } preloadComplete:function() { game.load.onLoadComplete.remove(this.preloadComplete, this); game.lockRender = false; this.addImages(); }, This gives me an error What am I doing wrong here?

Hi, new to the forums I've got an issue drawing images on the canvas on Firefox and IE. I created an array of Sprites (Floor Tiles), iterated through them and placed them right next to each other. When I translate the canvas (platformer style), everything draws perfectly EXCEPT on Firefox and IE. Both browsers seem to draw each sprite with a 1 pixel gap between them, but only when I'm calling ctx.translate(). The other browsers draw my floor tiles appropriately. Wondering if anybody ran into a similar issue. I'm running the latest version of each browser, and rounding sprite position coordinates when calling drawImage(). Again, this pixel gap issue only happens on Firefox and Internet Explorer. Thanks! Chrome / Opera / Chrome Mobile / Opera Mobile / Safari Mobile (During ctx.translate) Firefox / Internet Explorer (During ctx.translate)

I am passing tileScript in drawImage function on CanvasRenderingContext2D, gameplay - endless runner game like runfield, i am generating the track via tileScript and autoscrolling, i am passing tileScript object into the drawImage function to get sin-cos wave like effect (get the effect of up / down hill curves). but not getting the desired result.. http://www.creativeaddiction.co.uk/_site/view_full.html?d=display&f=bitmapdata+wobble.js&t=bitmapdata%20wobble any better way to do it ?

Hello, I recently started work on a game whose code can be found here - https://github.com/prtksxna/jump and it can be played here - http://prtksxna.github.com/jump/ (Only works on Chrome for now). Please give it some time to load the images. Spacebar to pause the game. I was initially drawing rectangles using fillRect instead of using drawImage to make the arrows. This has lead to major performance hit. I was initially getting 200-250 FPS, and now I am getting around 100-150 FPS and it sometimes randomly drops to 50 too I initialize a new image for every instance of the arrows here - https://github.com/prtksxna/jump/blob/master/res/js/button.js#L49 Is that what is causing the slow down? Also, I am not planning to have very complicated graphic assets, so should I just draw straight on canvas. I am planning to do pixel art so there might be a lot of fillRects in that case as well. How is this usually done? I am new to this and any pointers would be nice. I would not like to use a game or physics engine though. Thanks, Prateek