Search Results

Search found 1513 results on 61 pages for 'canvas'.

Page 2/61 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

• HTML 5 Canvas - Dynamically include multiple images in canvas

  - by Ron

  I need to include multiple images in a canvas. I want to load them dynamically via a for-loop. I tried a lot but in the best case only the last image is displayed. I check this tread but I still get only the last image. For explanation, here's my latest code(basically the one from the other post): for (var i = 0; i <= max; i++) { thisWidth = 250; thisHeight = 0; imgSrc = "photo_"+i+".jpg"; letterImg = new Image(); letterImg.onload = function() { context.drawImage(letterImg,thisWidth*i,thisHeight); } letterImg.src = imgSrc; } Any ideas?

  Read the article

• Collision detection between a sprite and rectangle in canvas

  - by Andy

  I'm building a Javascript + canvas game which is essentially a platformer. I have the player all set up and he's running, jumping and falling, but I'm having trouble with the collision detection between the player and blocks (the blocks will essentially be the platforms that the player moves on). The blocks are stored in an array like this: var blockList = [[50, 400, 100, 100]]; And drawn to the canvas using this: this.draw = function() { c.fillRect(blockList[0][0], blockList[0][1], 100, 100); } I'm checking for collisions using something along these lines in the player object: this.update = function() { // Check for collitions with blocks for(var i = 0; i < blockList.length; i++) { if((player.xpos + 34) > blockList[i][0] && player.ypos > blockList[i][1]) { player.xpos = blockList[i][0] - 28; return false; } } // Other code to move the player based on keyboard input etc } The idea is if the player will collide with a block in the next game update (the game uses a main loop running at 60Htz), the function will return false and exit, thus meaning the player won't move. Unfortunately, that only works when the player hits the left side of the block, and I can't work out how to make it so the player stops if it hits any side of the block. I have the properties player.xpos and player.ypos to help here.

  Read the article

• Managing text-maps in a 2D array on to be painted on HTML5 Canvas

  - by weka

  So, I'm making a HTML5 RPG just for fun. The map is a <canvas> (512px width, 352px height | 16 tiles across, 11 tiles top to bottom). I want to know if there's a more efficient way to paint the <canvas>. Here's how I have it right now. How tiles are loaded and painted on map The map is being painted by tiles (32x32) using the Image() piece. The image files are loaded through a simple for loop and put into an array called tiles[] to be PAINTED on using drawImage(). First, we load the tiles... and here's how it's being done: // SET UP THE & DRAW THE MAP TILES tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "js/tiles/t" + x + ".png"; imageObj.onload = function () { console.log("Added tile ... " + loadedImagesCount); loadedImagesCount++; if (loadedImagesCount == NUM_OF_TILES) { // Onces all tiles are loaded ... // We paint the map for (y = 0; y <= 15; y++) { for (x = 0; x <= 10; x++) { theX = x * 32; theY = y * 32; context.drawImage(tiles[5], theY, theX, 32, 32); } } } }; tiles.push(imageObj); } Naturally, when a player starts a game it loads the map they last left off. But for here, it an all-grass map. Right now, the maps use 2D arrays. Here's an example map. [[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1], [13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1], [1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]]; I get different maps using a simple if structure. Once the 2d array above is return, the corresponding number in each array will be painted according to Image() stored inside tile[]. Then drawImage() will occur and paint according to the x and y and times it by 32 to paint on the correct x-y coordinate. How multiple map switching occurs With my game, maps have five things to keep track of: currentID, leftID, rightID, upID, and bottomID. currentID: The current ID of the map you are on. leftID: What ID of currentID to load when you exit on the left of current map. rightID: What ID of currentID to load when you exit on the right of current map. downID: What ID of currentID to load when you exit on the bottom of current map. upID: What ID of currentID to load when you exit on the top of current map. Something to note: If either leftID, rightID, upID, or bottomID are NOT specific, that means they are a 0. That means they cannot leave that side of the map. It is merely an invisible blockade. So, once a person exits a side of the map, depending on where they exited... for example if they exited on the bottom, bottomID will the number of the map to load and thus be painted on the map. Here's a representational .GIF to help you better visualize: As you can see, sooner or later, with many maps I will be dealing with many IDs. And that can possibly get a little confusing and hectic. The obvious pros is that it load 176 tiles at a time, refresh a small 512x352 canvas, and handles one map at time. The con is that the MAP ids, when dealing with many maps, may get confusing at times. My question Is this an efficient way to store maps (given the usage of tiles), or is there a better way to handle maps? I was thinking along the lines of a giant map. The map-size is big and it's all one 2D array. The viewport, however, is still 512x352 pixels. Here's another .gif I made (for this question) to help visualize: Sorry if you cannot understand my English. Please ask anything you have trouble understanding. Hopefully, I made it clear. Thanks.

  Read the article

• HTML5 Canvas Game Timer

  - by zghyh

  How to create good timer for HTML5 Canvas games? I am using RequestAnimationFrame( http://paulirish.com/2011/requestanimationframe-for-smart-animating/ ) But object's move too fast. Something like my code is: http://pastebin.com/bSHCTMmq But if I press UP_ARROW player don't move one pixel, but move 5, 8, or 10 or more or less pixels. How to do if I press UP_ARROW player move 1 pixel? Thanks for help.

  Read the article

• [Tkinter/Python] Different line widths with canvas.create_line?

  - by Sam

  Does anyone have any idea why I get different line widths on the canvas in the following example? from Tkinter import * bigBoxSize = 150 class cFrame(Frame): def __init__(self, master, cwidth=450, cheight=450): Frame.__init__(self, master, relief=RAISED, height=550, width=600, bg = "grey") self.canvasWidth = cwidth self.canvasHeight = cheight self.canvas = Canvas(self, bg="white", width=cwidth, height=cheight, border =0) self.drawGridLines() self.canvas.pack(side=TOP, pady=20, padx=20) def drawGridLines(self, linewidth = 10): self.canvas.create_line(0, 0, self.canvasWidth, 0, width= linewidth ) self.canvas.create_line(0, 0, 0, self.canvasHeight, width= linewidth ) self.canvas.create_line(0, self.canvasHeight, self.canvasWidth + 2, self.canvasHeight, width= linewidth ) self.canvas.create_line(self.canvasWidth, self.canvasHeight, self.canvasWidth, 1, width= linewidth ) self.canvas.create_line(0, bigBoxSize, self.canvasWidth, bigBoxSize, width= linewidth ) self.canvas.create_line(0, bigBoxSize * 2, self.canvasWidth, bigBoxSize * 2, width= linewidth) root = Tk() C = cFrame(root) C.pack() root.mainloop() It's really frustrating me as I have no idea what's happening. If anyone can help me out then that'd be fantastic. Thanks!

  Read the article

• Implementing zoom on a fixed point, javascript/canvas

  - by csiz

  I want to implement zooming on the mouse pointer with the mouse wheel. That is scaling the image while the point under the mouse pointer stays fixed. Here is my code, which doesn't work very well var scala = 1 + event.wheelDelta / 1000; canvas.context.translate(-canvas.mouse.x * ( scala - 1 ) / canvas.scale,-canvas.mouse.y * ( scala - 1 ) / canvas.scale); canvas.context.scale(scala,scala); canvas.scale *= scala; //canvas.scale is my variable that is initially set to 1. //canvas.mouse is my variable that represents the mouse position relative to the canvas

  Read the article

• Android SurfaceView/Canvas flickering after trying to clear it

  - by Mark D

  So I am trying to clear the Canvas using canvas.drawColor(Color.BLACK) but if I just call this once, the display flickers and displays the old drawing which should have been covered up by the drawColor. Here is the important bits of my code - public void update() { //This method is called by a Thread Canvas canvas = holder.lockCanvas(null); if (canvas != null) { onDraw(canvas); } holder.unlockCanvasAndPost(canvas); } @Override protected void onDraw(Canvas canvas) { if (toClear) { canvas.drawColor(Color.BLACK); //if this is not set to change back to false, it does not flicker toClear = false; } //Draw some objects that are moving around } public void clearScreen() { //This method is called when the user pressed a button toClear = true; } After Googling around a litte, I heard about double buffering but came to the understanding that lockCanvas() and unlockCanvasAndPost() should handle this for me. What is going wrong here?

  Read the article

• Dealing with multiple animation state in one sprite sheet image using html5 canvas

  - by Sora

  I am recently creating a Game using html5 canvas .The player have multiple state it can walk jump kick and push and multiple other states my question is simple but after some deep research i couldn't find the best way to deal with those multiple states this is my jsfiddle : http://jsfiddle.net/Z7a5h/5/ i managed to do one animation but i started my code in a messy way ,can anyone show me a way to deal with multiple state animation for one sprite image or just give a useful link to follow and understand the concept of it please .I appreciate your help if (!this.IsWaiting) { this.IsWaiting = true; this.lastRenderTime = now; this.Pos = 1 + (this.Pos + 1) % 3; } else { if (now - this.lastRenderTime >= this.RenderRate) this.IsWaiting = false; }

  Read the article

• HTML5 Canvas Tileset Animation

  - by Veyha

  How to do in HTML5 canvas Image animating? I am have this code now: http://jsfiddle.net/WnjB6/1/ In here I am can add animations something like - Animation.add('stand', [0, 1, 2, 3, 4, 5]); But how to play this animation? My image drawing function is - drawTile(canvasX, canvasY, tile, tileWidth, tileHeight); Animation['stand']; return 0, 1, 2, 3, 4, 5 I am need something like when I am run Animation.play('stand') run animation from 'stand' array. I am try to do this something like one day, but no have more idea how. :( Thanks and sorry for my bad English language.

  Read the article

• Canvas scalable arc position

  - by Amay

  http://jsfiddle.net/cs5Sg/11/ I want to do the scalable canvas. I created two circles (arcs) and one line, when you click on circle and move it, the line will follow and change position. The problem is when I added code for resize: var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'), radius = 12, p = null, point = { p1: { x:100, y:250 }, p2: { x:400, y:100 } }, moving = false; window.addEventListener("resize", OnResizeCalled, false); function OnResizeCalled() { var gameWidth = window.innerWidth; var gameHeight = window.innerHeight; var scaleToFitX = gameWidth / 800; var scaleToFitY = gameHeight / 480; var currentScreenRatio = gameWidth / gameHeight; var optimalRatio = Math.min(scaleToFitX, scaleToFitY); if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) { canvas.style.width = gameWidth + "px"; canvas.style.height = gameHeight + "px"; } else { canvas.style.width = 800 * optimalRatio + "px"; canvas.style.height = 480 * optimalRatio + "px"; } } function init() { return setInterval(draw, 10); } canvas.addEventListener('mousedown', function(e) { for (p in point) { var mouseX = e.clientX - 1, mouseY = e.clientY - 1, distance = Math.sqrt(Math.pow(mouseX - point[p].x, 2) + Math.pow(mouseY - point[p].y, 2)); if (distance <= radius) { moving = p; break; } } }); canvas.addEventListener('mouseup', function(e) { moving = false; }); canvas.addEventListener('mousemove', function(e) { if(moving) { point[moving].x = e.clientX - 1; point[moving].y = e.clientY - 1; } }); function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.moveTo(point.p1.x,point.p1.y); context.lineTo(point.p2.x,point.p2.y); context.closePath(); context.fillStyle = '#8ED6FF'; context.fill(); context.stroke(); for (p in point) { context.beginPath(); context.arc(point[p].x,point[p].y,radius,0,2*Math.PI); context.fillStyle = 'red'; context.fill(); context.stroke(); } context.closePath(); } init(); The canvas is scalable, but the problem is with the points (circles). When you change the window size, they still have the same position on the canvas area, but the distance change (so the click option fails). How to fix that?

  Read the article

• Starting an HTML canvas game with no graphics skills

  - by Jacob

  I want to do some hobby game development, but I have some unfortunate handicaps that have me stuck in indecision; I have no artistic talent, and I also have no experience with 3D graphics. But this is just a hobby project that might not go anywhere, so I want to develop the stuff I care about; if the game shows good potential, my graphic "stubs" can be replaced with something more sophisticated. I do, however, want my graphics engine to render something approximate to the end goal. The game is tile-based, with each tile being a square. Each tile also has an elevation. My target platform (subject to modification) is JavaScript rendering to the HTML 5 canvas, either with a 2D or WebGL context. My question to those of you with game development experience is whether it's easier to develop an isometric game using a 2D graphics engine and sprites or a 3D game using rudimentary 3D primitives and basic textures? I realize that there are limitations to isometric projection, but if it makes developing my throwaway graphics engine easier, I'm OK with the visual warts that would be introduced. Or is representing a 3D world with an actual 3D engine easier?

  Read the article

• Need Guidance Making HTML5 Canvas Game Engine

  - by Scriptonaut

  So I have some free time this winter break and want to build a simple 2d HTML5 canvas game engine. Mostly a physics engine that will dictate the way objects move and interact(collisions, etc). I made a basic game here: http://caidenhome.com/HTML%205/pong.html and would like to make more, and thought that this would be a good reason to make a simple framework for this stuff. Here are some questions: Does the scripting language have to be Javascript? What about Ruby? I will probably write it with jQuery because of the selecting powers, but I'm curious either way. Are there any great guides you guys know of? I want a fast guide that will help me bust out this engine sometime in the next 2 weeks, hopefully sooner. What are some good conventions I should be aware of? What's the best way to get sound? At the moment I'm using something like this: var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'paddle_col.wav'); audioElement.load(); I'm interested in making this engine lightweight and extremely efficient, I will do whatever it takes to get great speeds and processing power. I know this question is fairly vague, but I just need a push in the right direction. Thanks :)

  Read the article

• canvas tile grid, hover effects, single tilesheet, etc

  - by user121730

  I'm currently in the process of building both the client and server side of an html5, canvas, and WebSocket game. This is what I have thus far for the client: http://jsfiddle.net/dDmTf/7/ Current obstacles The hover effect has no idea what to put back after the mouse leaves. Currently it's just drawing a "void" tile, but I can't figure out how to redraw a single tile without redrawing the whole map. How would I go about storing multiple layers within the map variable? I was considering just using a multi-dimensional array for each layer (similar to what you see as the current array), and just iterating through it, but is that really an efficient way of doing it? Side note The tile sheet being used for the jsfiddle display is only for development. I'll be replacing it as things progress in the engine. I hope you can help! Hopefully you guys can help me, I've been struggling to get through things, since I'm learning how things kind of stuff works as I go. If you guys have any pointers for my JavaScript, feel free. As I'm more or less learning advanced usage as I go, I'm sure I'm doing plenty of things wrong. Note: I will continue to update this post as the engine improves, but updating the jsfiddle link and updating the obstacles list by striking things that have been solved, or adding additions. Thanks!

  Read the article

• HTML5 Canvas Converting between cartesian and isometric coordinates

  - by Amir

  I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold: (1) Scale down the y-axis by 0.5, i.e. ctx.scale(1,0.5); or ctx.setTransform(1,0,0,0.5,0,0); This supposedly produces the following matrix: [x; y] x [1, 0; 0, 0.5] (2) Rotate the context by 45 degrees, i.e. ctx.rotate(Math.PI/4); This should produce the following matrix: [x; y] x [cos(45), -sin(45); sin(45), cos(45)] This (somehow) results in the final matrix of ctx.setTransform(2,-1,1,0.5,0,0); which I cannot seem to understand... How is this matrix derived? I cannot seem to produce this matrix by multiplying the scaling and rotation matrices produced earlier... Also, if I write out the equation for the final transformation matrix, I get: newX = 2x + y newY = -x + y/2 But this doesn't seem to be correct. For example, the following code draws an isometric tile at cartesian coordinates (500, 100). ctx.setTransform(2,-1,1,0.5,0,0); ctx.fillRect(500, 100, width*2, height); When I check the result on the screen, the actual coordinates are (285, 215) which do not satisfy the equations I produced earlier... So what is going on here? I would be very grateful if you could: (1) Help me understand how the final isometric transformation matrix is derived; (2) Help me produce the correct equation for finding the on-screen coordinates of an isometric projection. Many thanks and kind regards

  Read the article

• Recreating Doodle Jump in Canvas - Platforms spawning out of reach

  - by kushsolitary

  I have started to recreate Doodle Jump in HTML using Canvas. Here's my current progress. As you can see, if you play it for a few seconds, some platforms will be out of the player's reach. I don't know why is this happening. Here's the code which is responsible for the re-spawning of platforms. //Movement of player affected by gravity if(player.y > (height / 2) - (player.height / 2)) { player.y += player.vy; player.vy += gravity; } else { for(var i = 0; i < platforms.length; i++) { var p = platforms[i]; if(player.vy < 0) { p.y -= player.vy; player.vy += 0.08; } if(p.y > height) { position = 0; var h = p.y; platforms[i] = new Platform(); } if(player.vy >= 0) { player.y += player.vy; player.vy += gravity; } } } Also, here's the platform class. //Platform class function Platform(y) { this.image = new Image(); this.image.src = platformImg; this.width = 105; this.height = 25; this.x = Math.random() * (width - this.width); this.y = y || position; position += height / platformCount; //Function to draw it this.draw = function() { try { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); } catch(e) {} }; } You can also see the whole code on the link I provided. Also, when a platform goes out of the view port, the jump animation becomes quirky. I am still trying to find out what's causing this but can't find any solution.

  Read the article

• Animating sprites in HTML5 canvas

  - by fnx

  I'm creating a 2D platformer game with HTML5 canvas and javascript. I'm having a bit of a struggle with animations. Currently I animate by getting preloaded images from an array, and the code is really simple, in player.update() I call a function that does this: var animLength = this.animations[id].length; this.counter++; this.counter %= 3; if (this.counter == 2) this.spriteCounter++; this.spriteCounter %= animLength; return this.animations[id][this.spriteCounter]; There are a couple of problems with this one: When the player does 2 actions that require animating at the same time, animation speed doubles. Apparently this.counter++ is working twice at the same time. I imagine that if I start animating multiple sprites with this, the animation speed will multiply by the amount of sprites. Other issue is that I couldn't make the animation run only once instead of looping while key is held down. Someone told me that I should create a function Animation(animation id, isLooped boolean) and the use something like player.sprite = new Animation("explode", false) but I don't know how to make it work. Yes I'm a noob... :)

  Read the article

• Drawing two orthogonal strings in 3d space in Android Canvas?

  - by hasanghaforian

  I want to draw two strings in canvas.First string must be rotated around Y axis,for example 45 degrees.Second string must be start at the end of first string and also it must be orthogonal to first string. This is my code: String text = "In the"; float textWidth = redPaint.measureText(text); Matrix m0 = new Matrix(); Matrix m1 = new Matrix(); Matrix m2 = new Matrix(); mCamera = new Camera(); canvas.setMatrix(null); canvas.save(); mCamera.rotateY(45); mCamera.getMatrix(m0); m0.preTranslate(-100, -100); m0.postTranslate(100, 100); canvas.setMatrix(m0); canvas.drawText(text, 100, 100, redPaint); mCamera = new Camera(); mCamera.rotateY(90); mCamera.getMatrix(m1); m1.preTranslate(-textWidth - 100, -100); m1.postTranslate(textWidth + 100, 100); m2.setConcat(m1, m0); canvas.setMatrix(m2); canvas.drawText(text, 100 + textWidth, 100, greenPaint); But in result,only first string(text with red font)is visible. How can I do drawing two orthogonal strings in 3d space?

  Read the article

• 2D Collision in Canvas - Balls Overlapping When Velocity is High

  - by kushsolitary

  I am doing a simple experiment in canvas using Javascript in which some balls will be thrown on the screen with some initial velocity and then they will bounce on colliding with each other or with the walls. I managed to do the collision with walls perfectly but now the problem is with the collision with other balls. I am using the following code for it: //Check collision between two bodies function collides(b1, b2) { //Find the distance between their mid-points var dx = b1.x - b2.x, dy = b1.y - b2.y, dist = Math.round(Math.sqrt(dx*dx + dy*dy)); //Check if it is a collision if(dist <= (b1.r + b2.r)) { //Calculate the angles var angle = Math.atan2(dy, dx), sin = Math.sin(angle), cos = Math.cos(angle); //Calculate the old velocity components var v1x = b1.vx * cos, v2x = b2.vx * cos, v1y = b1.vy * sin, v2y = b2.vy * sin; //Calculate the new velocity components var vel1x = ((b1.m - b2.m) / (b1.m + b2.m)) * v1x + (2 * b2.m / (b1.m + b2.m)) * v2x, vel2x = (2 * b1.m / (b1.m + b2.m)) * v1x + ((b2.m - b1.m) / (b2.m + b1.m)) * v2x, vel1y = v1y, vel2y = v2y; //Set the new velocities b1.vx = vel1x; b2.vx = vel2x; b1.vy = vel1y; b2.vy = vel2y; } } You can see the experiment here. The problem is, some balls overlap each other and stick together while some of them rebound perfectly. I don't know what is causing this issue. Here's my balls object if that matters: function Ball() { //Random Positions this.x = 50 + Math.random() * W; this.y = 50 + Math.random() * H; //Random radii this.r = 15 + Math.random() * 30; this.m = this.r; //Random velocity components this.vx = 1 + Math.random() * 4; this.vy = 1 + Math.random() * 4; //Random shade of grey color this.c = Math.round(Math.random() * 200); this.draw = function() { ctx.beginPath(); ctx.fillStyle = "rgb(" + this.c + ", " + this.c + ", " + this.c + ")"; ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false); ctx.fill(); ctx.closePath(); } }

  Read the article

• OpenGL slower than Canvas

  - by VanDir

  Up to 3 days ago I used a Canvas in a SurfaceView to do all the graphics operations but now I switched to OpenGL because my game went from 60FPS to 30/45 with the increase of the sprites in some levels. However, I find myself disappointed because OpenGL now reaches around 40/50 FPS at all levels. Surely (I hope) I'm doing something wrong. How can I increase the performance at stable 60FPS? My game is pretty simple and I can not believe that it is impossible to reach them. I use 2D sprite texture applied to a square for all the objects. I use a transparent GLSurfaceView, the real background is applied in a ImageView behind the GLSurfaceView. Some code public MyGLSurfaceView(Context context, AttributeSet attrs) { super(context); setZOrderOnTop(true); setEGLConfigChooser(8, 8, 8, 8, 0, 0); getHolder().setFormat(PixelFormat.RGBA_8888); mRenderer = new ClearRenderer(getContext()); setRenderer(mRenderer); setLongClickable(true); setFocusable(true); } public void onSurfaceCreated(final GL10 gl, EGLConfig config) { gl.glEnable(GL10.GL_TEXTURE_2D); gl.glShadeModel(GL10.GL_SMOOTH); gl.glDisable(GL10.GL_DEPTH_TEST); gl.glDepthMask(false); gl.glEnable(GL10.GL_ALPHA_TEST); gl.glAlphaFunc(GL10.GL_GREATER, 0); gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_ONE, GL10.GL_ONE_MINUS_SRC_ALPHA); gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); } public void onSurfaceChanged(GL10 gl, int width, int height) { gl.glViewport(0, 0, width, height); gl.glMatrixMode(GL10.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrthof(0, width, height, 0, -1f, 1f); gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); } public void onDrawFrame(GL10 gl) { gl.glClear(GL10.GL_COLOR_BUFFER_BIT); gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); // Draw all the graphic object. for (byte i = 0; i < mGame.numberOfObjects(); i++){ mGame.getObject(i).draw(gl); } // Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY); } mGame.getObject(i).draw(gl) is for all the objects like this: /* HERE there is always a translatef and scalef transformation and sometimes rotatef */ gl.glBindTexture(GL10.GL_TEXTURE_2D, mTexPointer[0]); // Point to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mVertexBuffer); gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, mTextureBuffer); // Draw the vertices as triangle strip gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, mVertices.length / 3); EDIT: After some test it seems to be due to the transparent GLSurfaceView. If I delete this line of code: setEGLConfigChooser(8, 8, 8, 8, 0, 0); the background becomes all black but I reach 60 fps. What can I do?

  Read the article

• collision detection problems - Javascript/canvas game

  - by Tom Burman

  Ok here is a more detailed version of my question. What i want to do: i simply want the have a 2d array to represent my game map. i want a player sprite and i want that sprite to be able to move around my map freely using the keyboard and also have collisions with certain tiles of my map array. i want to use very large maps so i need a viewport. What i have: I have a loop to load the tile images into an array: /Loop to load tile images into an array var mapTiles = []; for (x = 0; x <= 256; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "images/prototype/"+x+".jpg"; mapTiles.push(imageObj); } I have a 2d array for my game map: //Array to hold map data var board = [ [1,2,3,4,3,4,3,4,5,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [17,18,19,20,19,20,19,20,21,22,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [33,34,35,36,35,36,35,36,37,38,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [49,50,51,52,51,52,51,52,53,54,1,1,1,1,1,1,1,1,1,1,1,1,1,197,198,199,1,1,1,1], [65,66,67,68,146,147,67,68,69,70,1,1,1,1,1,1,1,1,216,217,1,1,1,213,214,215,1,1,1,1], [81,82,83,161,162,163,164,84,85,86,1,1,1,1,1,1,1,1,232,233,1,1,1,229,230,231,1,1,1,1], [97,98,99,177,178,179,180,100,101,102,1,1,1,1,59,1,1,1,248,249,1,1,1,245,246,247,1,1,1,1], [1,1,238,1,1,1,1,239,240,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [216,217,254,1,1,1,1,255,256,1,204,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [232,233,1,1,1,117,118,1,1,1,220,1,1,119,120,1,1,1,1,1,1,1,1,1,1,1,119,120,1,1], [248,249,1,1,1,133,134,1,1,1,1,1,1,135,136,1,1,1,1,1,1,59,1,1,1,1,135,136,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,216,217,1,1,1,1,1,1,60,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,232,233,1,1,1,1,1,1,1,1,1,1,1,1,1,1,204,1,1,1,1,1,1,1,1,1,1,1], [1,1,248,249,1,1,1,1,1,1,1,1,1,1,1,1,1,1,220,1,1,1,1,1,1,216,217,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,149,150,151,1,1,1,1,1,1,1,1,1,1,232,233,1,1,1], [12,12,12,12,12,12,12,13,1,1,1,1,165,166,167,1,1,1,1,1,1,119,120,1,1,248,249,1,1,1], [28,28,28,28,28,28,28,29,1,1,1,1,181,182,183,1,1,1,1,1,1,135,136,1,1,1,1,1,1,1], [44,44,44,44,44,15,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,59,1,1,197,198,199,1,1,1,1,119,120,1], [1,1,1,1,1,27,28,29,1,1,216,217,1,1,1,1,1,1,1,1,213,214,215,1,1,1,1,135,136,1], [1,1,1,1,1,27,28,29,1,1,232,233,1,1,1,1,1,1,1,1,229,230,231,1,1,1,1,1,1,1], [1,1,1,1,1,27,28,29,1,1,248,249,1,1,1,1,1,1,1,1,245,246,247,1,1,1,1,1,1,1], [1,1,1,197,198,199,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,213,214,215,28,29,1,1,1,1,1,60,1,1,1,1,204,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,229,230,231,28,29,1,1,1,1,1,1,1,1,1,1,220,1,1,1,1,119,120,1,1,1,1,1], [1,1,1,245,246,247,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,135,136,1,1,60,1,1], [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,27,28,29,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]; I have my loop to place the correct tile sin the correct positions: //Loop to place tiles onto screen in correct position for (x = 0; x <= viewWidth; x++){ for (y = 0; y <= viewHeight; y++){ var width = 32; var height = 32; context.drawImage(mapTiles[board[y+viewY][x+viewX]],x*width, y*height); } } I Have my player object : //Place player object context.drawImage(playerImg, (playerX-viewX)*32,(playerY-viewY)*32, 32, 32); I have my viewport setup: //Set viewport pos viewX = playerX - Math.floor(0.5 * viewWidth); if (viewX < 0) viewX = 0; if (viewX+viewWidth > worldWidth) viewX = worldWidth - viewWidth; viewY = playerY - Math.floor(0.5 * viewHeight); if (viewY < 0) viewY = 0; if (viewY+viewHeight > worldHeight) viewY = worldHeight - viewHeight; I have my player movement: canvas.addEventListener('keydown', function(e) { console.log(e); var key = null; switch (e.which) { case 37: // Left if (playerY > 0) playerY--; break; case 38: // Up if (playerX > 0) playerX--; break; case 39: // Right if (playerY < worldWidth) playerY++; break; case 40: // Down if (playerX < worldHeight) playerX++; break; } My Problem: I have my map loading an it looks fine, but my player position thinks it's on a different tile to what it actually is. So for instance, i know that if my player moves left 1 tile, the value of that tile should be 2, but if i print out the value it should be moving to (2), it comes up with a different value. How ive tried to solve the problem: I have tried swap X and Y values for the initialization of my player, for when my map prints. If i swap the x and y values in this part of my code: context.drawImage(mapTiles[board[y+viewY][x+viewX]],x*width, y*height); The map doesnt get draw correctly at all and tiles are placed all in random positions or orientations IF i sway the x and y values for my player in this line : context.drawImage(playerImg, (playerX-viewX)*32,(playerY-viewY)*32, 32, 32); The players movements are inversed, so up and down keys move my player left and right viceversa. My question: Where am i going wrong in my code, and how do i solve it so i have my map looking like it should and my player moving as it should as well as my player returning the correct tileID it is standing on or moving too. Thanks Again ALSO Here is a link to my whole code: prototype

  Read the article

• HTML5 Canvas A* Star Path finding

  - by Veyha

  I am trying to learn A* Star Path finding. Library I am using this - https://github.com/qiao/PathFinding.js But I am don't understand one thing how to do. I am need find path from player.x/player.y (player.x and player.y is both 0) to 10/10 This code return array of where I am need to move - var path = finder.findPath(player.x, player.y, 10, 10, grid); I am get array where I am need to move, but how to apply this array to my player.x and player.y? Array structure like - 0: 0 1: 0 length: 2, 0: 1 1: 0 length: 2, ... I am very sorry for my bad English language. Thanks.

  Read the article

• WPF and canvas overlay

  - by user200851

  I have a grid which represents some data, and i need a canvas to overlay on top of it to layout some lines. The canvas is inside it's own usercontrol The problem is that the canvas and it's contents should autoresize when the grid resizes width and height. I added the canvas inside a viewbox, but it didn't do the trick. When the grid resizes, the canvas doesn't. The purpose of the canvas is to overlay a ruler-like functionality on top of the grid. I cannot use a style on the grid to replace the canvas, because the grid is showing different information than the canvas does. Think of it as chart, in which there are bar columns of different sizes (in my case the grid) and the days are lines in an overlay (just as a Gannt Chart) My code: taxCanvas = new TimeAxis(); Grid.SetRowSpan(taxCanvas, GRightMain.RowDefinitions.Count); Grid.SetColumnSpan(taxCanvas, GRightMain.ColumnDefinitions.Count); Grid.SetColumn(taxCanvas, 0); Grid.SetRow(taxCanvas, 0); Grid.SetZIndex(taxCanvas, -1); taxCanvas.Height = GRight.ActualHeight; taxCanvas.Width = GRight.ActualWidth; GRightMain.Children.Add(taxCanvas); TimeAxis is my canvas usercontrol, GRightMain is a grid which holds both my canvas and the grid with the content (Gright) in the same row and column.

  Read the article

• Anti-aliased text on HTML5's canvas element

  - by Matt Mazur

  I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element with text rendered on it. On the bottom you can see both "F"s placed side by side and zoomed in. Notice how the H1 element blends better with the background: http://jmockups.s3.amazonaws.com/canvas_rendering_both.png Here's the code I'm using to render the canvas text: var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.font = '26px Arial'; ctx.fillText('Quick Brown Fox', 0, 26); } Is it possible to render the text on the canvas in a way so that it looks identical to the H1 element? And why are they different?

  Read the article

• Canvas maximization bug?

  - by mitjak

  I must've killed over an hour on what seems to me like strange behaviour that happens in Firefox, Safari and Chrome. Here is some code: <!doctype html> <html> <head> <title>Watch me grow scrollbars!</title> </head> <body onload="resizeCanvas()"> <canvas id="canvas"></canvas> </body> </html> <script type="application/javascript"> function resizeCanvas() { var canvas = document.getElementById("canvas"); canvas.setAttribute("height", window.innerHeight); canvas.setAttribute("width", window.innerWidth); } </script> Basically, the canvas always seems to maximize 'too much', and the window grows scrollbars on both sides. I've tried using various ways of obtaining the document dimensions, including nesting canvas in a 100% wide & tall absolutely positioned div, as well as extracting the document.documentElement.clientWidth/Height properties. Just to be sure I'm not going insane, I've placed an image in place of the canvas, and voila, the same code worked perfectly to stretch the image out to document dimensions. What am I doing wrong here? I'm too tired to understand. Must.. drink.. something.

  Read the article

• Freeing ImageData when deleting a Canvas

  - by user578770

  I'm writing a XUL application using HTML Canvas to display Bitmap images. I'm generating ImageDatas and imporingt them in a canvas using the putImageData function : for(var pageIndex=0;pageIndex<100;pageIndex++){ this.img = imageDatas[pageIndex]; /* Create the Canvas element */ var imgCanvasTmp = document.createElementNS("http://www.w3.org/1999/xhtml",'html:canvas'); imgCanvasTmp.setAttribute('width', this.img.width); imgCanvasTmp.setAttribute('height', this.img.height); /* Import the image into the Canvas */ imgCanvasTmp.getContext('2d').putImageData(this.img, 0, 0); /* Use the Canvas into another part of the program (Commented out for testing) */ // this.displayCanvas(imgCanvasTmp,pageIndex); } The images are well imported but there seems to be a memory leak due to the putImageData function. When exiting the "for" loop, I would expect the memory allocated for the Canvas to be freed but, by executing the code without executing putImageData, I noticed that my program at the end use 100Mb less (my images are quite big). I came to the conclusion that the putImageData function prevent the garbage collector to free the allocated memory. Do you have any idea how I could force the garbage collector to free the memory? Is there any way to empty the Canvas? I already tried to delete the canvas using the delete operator or to use the clearRect function but it did nothing. I also tried to reuse the same canvas to display the image at each iteration but the amount of memory used did not changed, as if the image where imported without deleting the existing ones...

  Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >