Databases
StackOverflow2013
Postsdbo
POCanvas sprite animation partially invisible on iPhone/Safari and Chrome, but ok on Firefox
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCanvas sprite animation partially invisible on iPhone/Safari and Chrome, but ok on Firefox
    primarykey
    data
    text
    <p>I want to make an animated sprite walking around. Therefore I use a sprite sheet with all the moves of a character and animate through the different animation stages.</p> <p>Everything works fine on a PC with Firefox but with Chrome and on the iPhone the animation is partly broken. You can test it here on PC <a href="http://fiddle.jshell.net/WnjB6/48/" rel="nofollow">http://fiddle.jshell.net/WnjB6/48/</a></p> <p>and for iphone directly go here: <a href="http://fiddle.jshell.net/WnjB6/48/show/" rel="nofollow">http://fiddle.jshell.net/WnjB6/48/show/</a></p> <p>I found out that the second column of the spritesheet is not being shown during animation on iphone only. With smaller spritesheets this is working. See here</p> <p>PC <a href="http://jsfiddle.net/WnjB6/7/" rel="nofollow">http://jsfiddle.net/WnjB6/7/</a></p> <p>iphone <a href="http://jsfiddle.net/WnjB6/7/show" rel="nofollow">http://jsfiddle.net/WnjB6/7/show</a></p> <p>Is there a limitation on file size for iphone or how Chrome handles images?</p> <p>here is the source</p> <pre><code>var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Constructor for an animation object // image: graphics source // x, y: position to draw the animation // width, height: size of each tile // htiles: number of tiles horizontally in the image source var Animation = function(image, x, y, width, height, htiles) { this.image = image; this.x = x; this.y = y; this.width = width; this.height = height; this.htiles = htiles; this.animations = {}; this.currentAnimation = [0]; this.currentFrame = 0; } // Add animation to the object Animation.prototype.add = function(name, frames) { this.animations[name] = frames; }; // Select animation by name Animation.prototype.play = function(name) { this.currentAnimation = this.animations[name]; this.currentFrame = 0; }; // Advance animation, and draw the tile Animation.prototype.nextFrame = function() { // Move to next frame in current animation this.currentFrame = (this.currentFrame + 1) % this.currentAnimation.length; // Extract which image tile that is var tile = this.currentAnimation[this.currentFrame]; this.drawTile(tile); }; // Draw the given tile at the current position Animation.prototype.drawTile = function(tile) { // Clear region we are going to draw on context.clearRect(this.x, this.y, this.width, this.height); context.drawImage(this.image, (tile % this.htiles) * this.width, Math.floor(tile / this.htiles) * this.height, this.width, this.height, this.x, this.y, this.width, this.height); }; // Initialize the animation var image = new Image(); image.src = 'http://www.playa.cc/pic/playerstant.png'; var player1 = new Animation(image, 0, 0, 51, 51, 2); var aniStates = ['stand', 'right', 'walk']; player1.add(aniStates[0], [65, 67, 69, 71, 73, 75, 77, 79]); player1.add(aniStates[1], [0, 2, 4, 6, 8, 10, 12, 14, 16]); player1.add(aniStates[2], [72, 74, 76, 78, 1, 3, 5, 7, 9]); // Start with the walking animation, and start animating player1.play(aniStates[0]); var interval = setInterval(function() { player1.nextFrame(); }, 200); // Toggle animation between standing and walking every 3 seconds var mode = 0; setInterval(function() { player1.play(aniStates[mode++]); mode = mode % aniStates.length; }, 3000); </code></pre> <p>Thanks stot</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USstot
    1. USstot
    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