Jump to content

How to create a sprite using an image from my computer


Recommended Posts

I want to use a gif I made for my sprite (it would be nice if the gif only played when the character moved) So far, I have a rectangle with choppy character movements. (It would also be nice if I could make the character movement smoother. I watched tons of tutorials but I couldn't find anything that shows how to do what I want to do.

Here is the code

<!DOCTYPE html>
    <style type="text/css">
        #backgroundColor {
            width: 100px;
                    height: 100px;
                   background-color: white;
                animation-name: backgroundChange;
                animation-duration: 45s;
                animation-iteration-count: infinite;
        @keyframes backgroundChange {
                0%    {background-color: white;}
                3.3%  {background-color: #ffc5c5;}
                6.6%  {background-color: #f78a8a;}
                10%   {background-color: #f95d5d;}
                13.3% {background-color: #f73737;}
                16.6% {background-color: red;}
                20%      {background-color: #b70303;}
                23.3% {background-color: #8c0202;}
                26.6% {background-color: #5a0202;}
                30%   {background-color: #310101;}
                33.3% {background-color: black;}
                36.6% {background-color: #292929;}
                40%      {background-color: #3c3c3c;}
                43.3% {background-color: #757575;}
                46.6% {background-color: #d0d0d0;}
                50%   {background-color: white;}
                53.3% {background-color: #ffc5c5;}
                56.6% {background-color: #f78a8a;}
                60%      {background-color: #f95d5d;}
                63.6% {background-color: #f73737;}
                66.6% {background-color: red;}
                70%      {background-color: #b70303;}
                73.3% {background-color: #8c0202;}
                76.6% {background-color: #5a0202;}
                80%      {background-color: #310101;}
                83%      {background-color: black;}
                86.6% {background-color: #292929;}
                90%      {background-color: #3c3c3c;}
                93.3% {background-color: #757575;}
                96%      {background-color: #d0d0d0;}
                100%  {background-color: white;}
                height: 540px;
                width: 6350px;
                transform: translate(-50%,-50%);
                box-shadow: 0 0 16px 2px rgba(0,0,0,0.4);
                background-color: #FFF;
    <title>Bermuda Triangle</title>
<body id="backgroundColor">
    <img id="character" style="height: 40px; width: 40px;" src="https://piskel-imgstore-b.appspot.com/img/9478ea0f-79c8-11e8-b58c-67762e4a73c8.gif">

    <canvas id='canvas' style="background-image:url(https://preview.ibb.co/fEanjo/realroom.jpg);  height: 540px; width: 635px;"></canvas>
        var canvas = document.querySelector('#canvas');
        var context = canvas.getContext('2d');
        var xPos = 0;
        var yPos= 0;
        context.rect(xPos, yPos, 40, 40);
        function move(e) {
        context.rect(xPos, yPos, 40, 40);
        document.onkeydown = move;

Link to comment
Share on other sites

You would not use an animated GIF, you would have to use a static image with all of the animation frames on it, then manually slice pieces of the image based on the amount of time that has passed.

Your game needs a loop that runs every fixed amount of time. You can do this using requestAnimationFrame(). MDN has a guide on how to use requestAnimationFrame here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations. In the loop, the game needs to read inputs, calculate values and then display something on the canvas.

For reading inputs, you are going to need one variable for each button in your game. In your current project, UP, DOWN, LEFT and RIGHT. You can add more buttons if you need them. Each of these variables starts off false, gets set to true when the onkeydown event fires and gets set back to false when the onkeyup event fires. During the game loop, if the program sees DOWN set to true, it will add 10 to the yPos variable.

To keep things more organized, you should start using objects. You need a Controller object and a Character object. The controller contains information about which buttons are pressed and the character contains position information. The character could also contain information about the sprite, such as a reference to the image and the current animation frame. The following is a potential structure for these objects:

var Controller = {
  UP : false,
  DOWN : false,
  LEFT : false,
  RIGHT : false

var Character = {
  x : 0,
  y : 0,
  sprite : {
    image : document.getElementById("character"),
    width : 40,
    height : 40,
    currentFrame : 0

We could go further into object-oriented programming and add methods to update the button values and to calculate the coordinates of the sprite.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...