logo
down
shadow

Responsive sprite sheet animation not scaling well


Responsive sprite sheet animation not scaling well

By : user42870
Date : November 22 2020, 10:40 AM
like below fixes the issue You're running into a sub-pixel issue for your (resized) animated sprite due to floated number.
Floor the result value: jsFiddle demo
code :
var sprite_height_scaled = (animation.originalHeight * scale) << 0;
(animation.originalHeight * scale) | 0
parseInt(animation.originalHeight * scale, 10)
Math.floor(animation.originalHeight * scale, 10)
// 25(frames) / 6025px(sprite-height) = 241px frame height
// now let's scale
var scale = 0.8;
console.log( (6025/25)*scale );     // 168.7px
// We cannot have subpixel values so let's floor the result:
console.log( (6025/25)*scale | 0 ); // 168px
// Still, the main problem is: if we resize the background to 0.8 scale,
// will every frame's first pixel line inherit the 
// previous frame (lower line) sub-pixel data?
// Most likely.


Share : facebook icon twitter icon
creating sprite animation from sprite sheet cocos2d

creating sprite animation from sprite sheet cocos2d


By : user5313106
Date : March 29 2020, 07:55 AM
will help you The solutions I found for this was not using a fraction in the delay for CCAnimation... strange! as I thought the delay value could be any float!
CSS Sprite-sheet animation with Multiple Row Sprite-sheet

CSS Sprite-sheet animation with Multiple Row Sprite-sheet


By : Doraemon
Date : March 29 2020, 07:55 AM
Hope this helps You need 1 row. Your example uses steps function. It use number of intervals from start to end. So if you have several rows in your sprite, height(rows) will not influence on width of one step (interval).
How to create a responsive sprite sheet animation in css?

How to create a responsive sprite sheet animation in css?


By : Spencer Claxton
Date : March 29 2020, 07:55 AM
Hope this helps I figured out how to do it eventually! Just in case anyone still cares, Let me do some explaning just so you don't go through what I went throught:
code :
    <style>
      div.sprite {
            margin: 0 auto;
            width: 40%;
/*            Change this to what ever value you desire*/
            height: 0;
            padding-bottom: 40%;
            background-image: url("le-cloud-copy.png");
/*            Add the sprite sheet here, must be on a staright line*/
            background-position: 0 0;
            background-size: 1800%;
/*            I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
            display: block;
        }
        div.sprite:hover {
/*            background-position: 500% 0;*/
            animation: play .9s steps(18);
/*            18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
        }
        @keyframes play {
            100% {
                background-position: 1800% 0;
            }
        }
    </style>
<script src="js/prefixfree.min.js"></script>
CSS sprite animation using step with sprite sheet that is not linear not stepping

CSS sprite animation using step with sprite sheet that is not linear not stepping


By : Cameron
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I'm not sure how you're going to accomplish this with step(). Normally I've seen step animations specified using a start and end condition, and letting step take care of the tweening for you. Since you're specifying the tweening conditions in your keyframes, you'd have to make sure the math matches exactly, which is going to be impossible (100/14 doesn't give you an evenly divisible number).
I'd really explore ways you might be able to use a linear sprite sheet. If your workflow doesn't support it out of the box, perhaps you could restructure it in "post" using a tool like ImageMagick to slice the 2D image and recompose it into a linear one.
code :
0.0% {background-position: 0px 0px;}
7.14285% {background-position: 0px 0px;}
7.14286% {background-position: -270px 0px;}
14.28570% {background-position: -270px 0px;}
14.28571% {background-position: -540px 0px;}
...
etc.
libgdx sprite-sheet based animation scaling

libgdx sprite-sheet based animation scaling


By : jriplton
Date : March 29 2020, 07:55 AM
may help you . I am quite new to libgdx and android programming in general. I am having problems rendering a sprite-sheet-based animation, and getting it to be the same size on different screen sizes. , That's not the proper way to use viewport:
code :
 viewport = new FitViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight(), camera);
 viewport = new FitViewport(WORLD_WIDTH,WORLD_HEIGHT, camera);
batch.draw(techman.Frame,x,y,width,height);
Related Posts Related Posts :
  • javascript - explanation request of a behaviour
  • Converting String into date format in JS
  • Choose element Angular
  • Display background grid by using image with CSS
  • Call function from another Controller in another file AngularJS
  • How to change texture in Gera library?
  • When trying to use windows.location.href , the values of $_POST[''] is lost
  • jQuery click action on appended item
  • NodeJS & Socket.IO: Emit a request event and get the response, when/where should I bind the listener?
  • 4-digit form on bootstrap modal
  • Prevent characters like quotation marks from input
  • Sign in option creation using jsp and oracle database
  • use socket.io in my controller with yeoman
  • What happens under the hood to prevent calling a bound method changing the this object?
  • issue with jquery .append function
  • Is it possible to EventHandle every GET request a page makes via Javascript?
  • How to select class with ng-if
  • Cannot communicate with websocket. Autobahn: received HELLO message, and session is not yet established
  • Socket.io - Cannot connect to client
  • Load Accordian Panel on click rather than page load
  • How to register async middleware module within express.js app?
  • JS / Cannot read property 'push' of undefined
  • how to make jquery plugin?
  • MATH reverting rotated coordinates
  • Add an expandable text box to every post
  • What was the rationale behind having the receiver in functions default to the global object?
  • JavaScript chaining many function
  • while loop over takes the each method
  • What are the difference between $(document).bind('ready', function) and $(document).ready(function() {})
  • cut the string in javascript
  • Tool tip not working on text area bootstrap
  • AngularJS: how to activate first non zero item in ngRepeat?
  • Pattern for "column total" of an array of arrays
  • Any selector using * failed in my case
  • Uncaught ReferenceError: app is not defined in Angularjs
  • Unit testing controller which has a $state.go method in controller
  • Use of Meteor-ui-progress-circle (accessing to Template variables created in the HTML)
  • JavaScript: Google maps mapOptions?
  • How do I track Universal Analytics events through Google Tag Manager?
  • Firefox Scrolling Bug When Changing :after Contents
  • Drop down list does not work
  • Display month and year specific datepicker in jquery
  • How to show BAr graph rather than line graph in High Stoch Chart
  • Accessing Angular $Scope in web workers
  • How to convert JavaScript(UnityScript) to C# and implement a low pass filter?
  • Need a logic to implement select button value via onchange event
  • redirect in codeigniter using ajax function
  • How to populate this form data and post it with jquery
  • Retrive value from array id in js function
  • angularjs $index when ng-hide with ng-repeat
  • ExtJS TaskRunner
  • Progress bar not hiding after fetching values via AJAX in JavaScript
  • Pop up window code fails
  • how to make dynamic javascript array with key and value group
  • Implement Facebook API login with reactjs
  • What is the meaning of sign ':' in javascript
  • Change all id's in HTMLDivElement using jQuery
  • load multiple pages from different domain in different divs using javascript
  • Could Not Resolve Host github.com
  • jQuery "Chosen" on-filter event?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org