Databases
StackOverflow2013
Postsdbo
PORotating a sprite from a sprite sheet onto a html5 canvas, using arrows keys. (2d html5 canvas)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORotating a sprite from a sprite sheet onto a html5 canvas, using arrows keys. (2d html5 canvas)
    primarykey
    data
    text
    <p>Let me try to explain what I have now, and what I am trying to add to it. Right now I have a canvas, 500x899 following a sprite(player), onto a background image(map) that's 5000x3750. Both are on the same sprite sheet. Right now if the arrow keys are pressed, the Player sprite moves in that direction along the Map while the canvas follows the player. - But what I would like is to have the left/right arrow keys rotate the player and the up key to move the player in that direction. Here's my code, it is a lot, but its organized:</p> <pre><code>// wrapper for "class" Rectangle (function(){ function Rectangle(left, top, width, height){ this.left = left || 0; this.top = top || 0; this.right = (left + width) || 0; this.bottom = (top + height) || 0; } Rectangle.prototype.set = function(left, top, width, height){ this.left = left; this.top = top; this.width = width || this.width; this.height = height || this.height; this.right = (this.left + this.width); this.bottom = (this.top + this.height); } Rectangle.prototype.within = function(r) { return (r.left &lt;= this.left &amp;&amp; r.right &gt;= this.right &amp;&amp; r.top &lt;= this.top &amp;&amp; r.bottom &gt;= this.bottom); } Rectangle.prototype.overlaps = function(r) { return (this.left &lt; r.right &amp;&amp; r.left &lt; this.right &amp;&amp; this.top &lt; r.bottom &amp;&amp; r.top &lt; this.bottom); } // add "class" Rectangle to our Game object Game.Rectangle = Rectangle; })(); // wrapper for "class" Camera (avoid global objects) (function(){ // possibles axis to move the camera var AXIS = { NONE: "none", HORIZONTAL: "horizontal", VERTICAL: "vertical", BOTH: "both" }; // Camera constructor function Camera(xView, yView, canvasWidth, canvasHeight, worldWidth, worldHeight) { // position of camera (left-top coordinate) this.xView = xView || 0; this.yView = yView || 0; // distance from followed object to border before camera starts move this.xDeadZone = 0; // min distance to horizontal borders this.yDeadZone = 0; // min distance to vertical borders // viewport dimensions this.wView = 800; this.hView = 599; // allow camera to move in vertical and horizontal axis this.axis = AXIS.BOTH; // object that should be followed this.followed = null; // rectangle that represents the viewport this.viewportRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView); // rectangle that represents the world's boundary (room's boundary) this.worldRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView); } // gameObject needs to have "x" and "y" properties (as world(or room) position) Camera.prototype.follow = function(gameObject, xDeadZone, yDeadZone) { this.followed = gameObject; this.xDeadZone = xDeadZone; this.yDeadZone = yDeadZone; } Camera.prototype.update = function() { // keep following the player (or other desired object) if(this.followed != null) { if(this.axis == AXIS.HORIZONTAL || this.axis == AXIS.BOTH) { // moves camera on horizontal axis based on followed object position if(this.followed.x - this.xView + this.xDeadZone &gt; this.wView) this.xView = this.followed.x - (this.wView - this.xDeadZone); else if(this.followed.x - this.xDeadZone &lt; this.xView) this.xView = this.followed.x - this.xDeadZone; } if(this.axis == AXIS.VERTICAL || this.axis == AXIS.BOTH) { // moves camera on vertical axis based on followed object position if(this.followed.y - this.yView + this.yDeadZone &gt; this.hView) this.yView = this.followed.y - (this.hView - this.yDeadZone); else if(this.followed.y - this.yDeadZone &lt; this.yView) this.yView = this.followed.y - this.yDeadZone; } } // update viewportRect this.viewportRect.set(this.xView, this.yView); // don't let camera leaves the world's boundary if(!this.viewportRect.within(this.worldRect)) { if(this.viewportRect.left &lt; this.worldRect.left) this.xView = this.worldRect.left; if(this.viewportRect.top &lt; this.worldRect.top) this.yView = this.worldRect.top; if(this.viewportRect.right &gt; this.worldRect.right) this.xView = this.worldRect.right - this.wView; if(this.viewportRect.bottom &gt; this.worldRect.bottom) this.yView = this.worldRect.bottom - this.hView; } } // add "class" Camera to our Game object Game.Camera = Camera; })(); // wrapper for "class" Player (function(){ function Player(x, y){ // (x, y) = center of object // ATTENTION: // it represents the player position on the world(room), not the canvas position this.x = x; this.y = y; // move speed in pixels per second this.speed = 200; // render properties this.width = 85; this.height = 80; } Player.prototype.update = function(step, worldWidth, worldHeight){ // parameter step is the time between frames ( in seconds ) // check controls and move the player accordingly if(Game.controls.left) this.x -= this.speed * step; if(Game.controls.up) this.y -= this.speed * step; if(Game.controls.right) this.x += this.speed * step; if(Game.controls.down) this.y += this.speed * step; // don't let player leaves the world's boundary if(this.x - this.width/2 &lt; 0){ this.x = this.width/2; } if(this.y - this.height/2 &lt; 0){ this.y = this.height/2; } if(this.x + this.width/2 &gt; worldWidth){ this.x = worldWidth - this.width/2; } if(this.y + this.height/2 &gt; worldHeight){ this.y = worldHeight - this.height/2; } } Player.prototype.draw = function(context, xView, yView){ context.save(); // before draw we need to convert player world's position to canvas position context.drawImage(imgSprite,1700,599, this.width, this.height,(this.x-this.width/2) - xView, (this.y-this.height/2) - yView, this.width, this.height); context.restore(); } // add "class" Player to our Game object Game.Player = Player; })(); // wrapper for "class" Map (function(){ function Map(width, height){ // map dimensions this.width = width; this.height = height; // map texture this.image = null; } // generate an example of a large map Map.prototype.generate = function(){ this.x = 0; this.y = 0; var ctx = document.createElement("canvas").getContext("2d"); ctx.canvas.width = this.width; ctx.canvas.height = this.height; ctx.drawImage(imgSprite,0,2250,this.width,this.height,this.x,this.y,this.width,this.height); ctx.restore(); // store the generate map as this image texture this.image = new Image(); this.image.src = ctx.canvas.toDataURL("image/png"); // clear context ctx = null; } // draw the map adjusted to camera Map.prototype.draw = function(context, xView, yView){ var sx, sy, dx, dy; var sWidth, sHeight, dWidth, dHeight; // offset point to crop the image sx = xView; sy = yView; // dimensions of cropped image sWidth = context.canvas.width; sHeight = context.canvas.height; // if cropped image is smaller than canvas we need to change the source dimensions if(this.image.width - sx &lt; sWidth){ sWidth = this.image.width - sx; } if(this.image.height - sy &lt; sHeight){ sHeight = this.image.height - sy; } // location on canvas to draw the croped image dx = 0; dy = 0; // match destination with source to not scale the image dWidth = sWidth; dHeight = sHeight; context.drawImage(this.image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); } // add "class" Map to our Game object Game.Map = Map; })(); // Game Script (function(){ // prepaire our game canvas var canvas = document.getElementById("gameCanvas"); var context = canvas.getContext("2d"); // game settings: var FPS = 30; var INTERVAL = 1000/FPS; // milliseconds var STEP = INTERVAL/1000 // seconds // setup an object that represents the room var room = { width: 5000, height: 3750, map: new Game.Map(5000, 3750) }; // generate a large image texture for the room room.map.generate(); // setup player var player = new Game.Player(85, 80); // setup the magic camera !!! var camera = new Game.Camera(0, 0, 800, 599, room.width, room.height); camera.follow(player, 800/2, 599/2); // Game update function var update = function(){ player.update(STEP, room.width, room.height); camera.update(); } // Game draw function var draw = function(){ // clear the entire canvas context.clearRect(0, 0, 800, 599); // redraw all objects room.map.draw(context, camera.xView, camera.yView); player.draw(context, camera.xView, camera.yView); } // Game Loop var gameLoop = function(){ update(); draw(); } // &lt;-- configure play/pause capabilities: // I'll use setInterval instead of requestAnimationFrame for compatibility reason, // but it's easy to change that. var runningId = -1; Game.play = function(){ if(runningId == -1){ runningId = setInterval(function(){ gameLoop(); }, INTERVAL); console.log("play"); } } Game.togglePause = function(){ if(runningId == -1){ Game.play(); } else { clearInterval(runningId); runningId = -1; console.log("paused"); } } })(); // &lt;-- configure Game controls: Game.controls = { left: false, up: false, right: false, down: false, }; window.addEventListener("keydown", function(e){ switch(e.keyCode) { case 37: // left arrow Game.controls.left = true; break; case 38: // up arrow Game.controls.up = true; break; case 39: // right arrow Game.controls.right = true; break; case 40: // down arrow Game.controls.down = true; break; } }, false); window.addEventListener("keyup", function(e){ switch(e.keyCode) { case 37: // left arrow Game.controls.left = false; break; case 38: // up arrow Game.controls.up = false; break; case 39: // right arrow Game.controls.right = false; break; case 40: // down arrow Game.controls.down = false; break; case 80: // key P pauses the game Game.togglePause(); break; } }, false); // start the game when page is loaded window.onload = function(){ Game.play(); } </code></pre> <p>Again this works for the canvas to follow the player and all, but now I'm trying to rotate the player sprite using the arrow keys. I'v used google and tried some codes similar too : </p> <pre><code>var thrust = 0; var rotation = 0; ctxPlayer.translate(this.width/2, this.height/2); ctxPlayer.rotate(this.angle); ctxPlayer.translate(this.x,this.y); if(Game.controls.left) this.angle =-3 </code></pre> <p>(Sorry i dont have exactly what I have tried regarding the rotation, as I've deleted them every time it didn't work). Using codes similiar to this the only rotation I have gotten is the player rotating in a giant circle around a coordinate. (Not actually rotating in one spot and not with the push of a key)</p> <p>Any help or advice is really appreciated.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2582299
    1. USuser2582299
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload