How To Do Animation


  • Corleone Staff

    How To Do Animation
    Some Important Things For Animating

    https://iappsbeats.com/animations/
    We using This site For Animating.

    How To Create Animation
    •Touch New Empty Animation on Top Left
    •And Now, You Created Empty Ani!

    How to Add Sprites
    •Touch "My Libary" on Top Right (Start Menu)
    •And Drop Your Sprites To Here

    How To Add Frame
    •You Wanna Add Frame?
    •I'll Use CTRL+C and CTRL+V .Touch Sprite on Program And You'll See Cells on Down .Copy And Paste to the Second Frame

    And Do Not Forget To
    Save Your Animations 😉

    I'll post more information Soon...



  • @Wallet Cool!! 🙂



  • @Lekai it's pretty easy to use and you can also rotate imgs as well.



  • Been a while since i've heard from you! Yeah i'm getting pretty great in animation. Will be posting sooner or later so stay tuned! Thx for the advice or picking out some of the features the Software has to offer!



  • A little more technical step by step insight on the layout of a Bani and telling you what I found out so far about what is what:

    Example:
    (Screencapture of the Gani found here)
    https://www.corleoneonline.com/post/979

    {
      "name": "cast2.bani",
      "modificatedDate": "03/05/2019 11:56",
      "filetype": "bbuilderani",
      "aniversion": 1,
      "copyright": "2015 iAppsBeats LTD",
    
      "options": {
        "looping": 1,
        "continuous": 1,
        "center": [24,32],
        "blockingbounds": [0,0,32,32],
        "nameoffsety": 45
      },
    
      "defaults": {
        "BODY": "elkbodynew3.png",
        "HEAD": "elkihead.gif",
        "HAT": "hatelkhalonew.png",
        "CIRCLE": "circle.png"
      },
    
      "sprites": {
        "0": {"gfx": "bbuilder_bomb.png","bounds": [0,48,48,26]},
        "1": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [0,-256,-256]},
        "2": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [10,-90,-100]},
        "3": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [20,-80,-100]},
        "4": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [30,-70,-100]},
        "5": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [40,-60,-100]},
        "6": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [50,-50,-100]},
        "7": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [60,-40,-100]},
        "8": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [70,-30,-100]},
        "9": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [80,-20,-100]},
        "10": {"bounds": [0,0,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [90,-10,-100]},
        "20": {"gfx": "HEAD","bounds": [48,0,48,48]},
        "21": {"gfx": "HEAD","bounds": [96,0,48,48],"scale": [-1,1]},
        "22": {"gfx": "HEAD","bounds": [0,0,48,48]},
        "23": {"gfx": "HEAD","bounds": [96,0,48,48]},
        "40": {"gfx": "BODY","bounds": [48,0,48,48]},
        "41": {"gfx": "BODY","bounds": [96,0,48,48],"scale": [-1,1]},
        "42": {"gfx": "BODY","bounds": [0,0,48,48]},
        "43": {"gfx": "BODY","bounds": [96,0,48,48]},
        "44": {"gfx": "BODY","bounds": [48,48,48,48]},
        "45": {"gfx": "BODY","bounds": [96,48,48,48],"scale": [-1,1]},
        "46": {"gfx": "BODY","bounds": [0,48,48,48]},
        "47": {"gfx": "BODY","bounds": [96,48,48,48]},
        "48": {"gfx": "BODY","bounds": [48,96,48,48]},
        "49": {"gfx": "BODY","bounds": [96,96,48,48],"scale": [-1,1]},
        "50": {"gfx": "BODY","bounds": [0,96,48,48]},
        "51": {"gfx": "BODY","bounds": [96,96,48,48]},
        "52": {"gfx": "BODY","bounds": [48,144,48,48]},
        "53": {"gfx": "BODY","bounds": [96,144,48,48],"scale": [-1,1]},
        "54": {"gfx": "BODY","bounds": [0,144,48,48]},
        "55": {"gfx": "BODY","bounds": [96,144,48,48]},
        "56": {"gfx": "BODY","bounds": [48,192,48,48]},
        "57": {"gfx": "BODY","bounds": [96,192,48,48],"scale": [-1,1]},
        "58": {"gfx": "BODY","bounds": [0,192,48,48]},
        "59": {"gfx": "BODY","bounds": [96,192,48,48]},
        "100": {"gfx": "HEAD","bounds": [0,48,5,6]},
        "101": {"gfx": "HEAD","bounds": [5,48,8,10]},
        "102": {"gfx": "HEAD","bounds": [13,48,11,12]},
        "103": {"gfx": "HEAD","bounds": [24,48,10,11]},
        "104": {"gfx": "HEAD","bounds": [34,48,11,9]},
        "105": {"gfx": "HEAD","bounds": [45,48,11,10]},
        "106": {"gfx": "HEAD","bounds": [0,48,5,6],"scale": [-1,1]},
        "107": {"gfx": "HEAD","bounds": [5,48,8,10],"scale": [-1,1]},
        "108": {"gfx": "HEAD","bounds": [13,48,11,12],"scale": [-1,1]},
        "109": {"gfx": "HEAD","bounds": [24,48,10,11],"scale": [-1,1]},
        "110": {"gfx": "HEAD","bounds": [34,48,11,9],"scale": [-1,1]},
        "111": {"gfx": "HEAD","bounds": [45,48,11,10],"scale": [-1,1]},
        "120": {"gfx": "HEAD","bounds": [56,48,9,10]},
        "121": {"gfx": "HEAD","bounds": [65,48,11,10]},
        "122": {"gfx": "HEAD","bounds": [56,48,9,10],"scale": [-1,1]},
        "123": {"gfx": "HEAD","bounds": [65,48,11,10],"scale": [-1,1]},
        "200": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [0,24,16]},
        "201": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [45,24,16]},
        "202": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [90,24,16]},
        "203": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [135,24,16]},
        "204": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [180,24,16]},
        "205": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [225,24,16]},
        "206": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [270,24,16]},
        "207": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [315,24,16]},
        "220": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [0,24,16],"scale": [1,-1]},
        "221": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [315,24,16],"scale": [1,-1]},
        "222": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [270,24,16],"scale": [1,-1]},
        "223": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [225,24,16],"scale": [1,-1]},
        "224": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [180,24,16],"scale": [1,-1]},
        "225": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [135,24,16],"scale": [1,-1]},
        "226": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [90,24,16],"scale": [1,-1]},
        "227": {"gfx": "SWORD","bounds": [0,0,112,32],"rotation": [45,24,16],"scale": [1,-1]},
        "300": {"gfx": "HAT","bounds": [48,0,48,60]},
        "301": {"gfx": "HAT","bounds": [96,0,48,60],"scale": [-1,1]},
        "302": {"gfx": "HAT","bounds": [0,0,48,60]},
        "303": {"gfx": "HAT","bounds": [96,0,48,60]},
        "400": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [0,24,48]},
        "401": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [45,24,48]},
        "402": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [90,24,48]},
        "403": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [135,24,48]},
        "404": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [180,24,48]},
        "405": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [225,24,48]},
        "406": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [270,24,48]},
        "407": {"gfx": "BOW","bounds": [0,0,64,96],"rotation": [315,24,48]}
      },
    
      "frames": [
        {
          "directions": [[],[],[["1",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
      ]
    }
    

    Below, I cut out most of the unused sprites to compress the file a little so it went from 8 kb to 3 kb. This is beneficial for atleast 2 cases:

    The Computer needs to read less symbols.
    The Filesize required to Download or Stream is less.

    In the frame section you can see which Sprite's IDs are actually being used, so those who are not called, can be scrapped, unless you wish to work with them later on again, but its not hard to add them via Notepad.

    {
      "name": "castfinal.bani",
      "modificatedDate": "03/05/2019 13:57",
      "filetype": "bbuilderani",
      "aniversion": 1,
      "copyright": "2015 iAppsBeats LTD",
    
      "options": {
        "looping": 1,
        "continuous": 1,
        "center": [24,32],
        "blockingbounds": [0,0,32,32],
        "nameoffsety": 45
      },
    
      "defaults": {
        "BODY": "elkbodynew3.png",
        "HEAD": "elkihead.gif",
        "HAT": "hatelkhalonew.png",
        "CIRCLE": "circle.png"
      },
    
      "sprites": {
        "0": {"gfx": "bbuilder_bomb.png","bounds": [0,48,48,26]},
        "1": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [0,128,128]},
        "2": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [10,128,128]},
        "3": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [20,128,128]},
        "4": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [30,128,128]},
        "5": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [40,128,128]},
        "6": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [50,128,128]},
        "7": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [60,128,128]},
        "8": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [70,128,128]},
        "9": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [80,128,128]},
        "10": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [90,128,128]},
        "22": {"gfx": "HEAD","bounds": [0,0,48,48]},
        "50": {"gfx": "BODY","bounds": [0,96,48,48]},
        "302": {"gfx": "HAT","bounds": [0,0,48,60]}
      },
    
      "frames": [
        {
          "directions": [[],[],[["1",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["2",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["3",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["4",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["5",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["6",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["7",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["8",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        },
        {
          "directions": [[],[],[["9",-111,-111],["0",-8,9],["50",-8,-7],["22",-7,-31],["302",-8,-48]],[]],
          "duration": 50
        }
      ]
    }
    

    Here is the example above with commentary on definition and several parts

    {
      "name": "castfinal.bani", 			// The Name of the Animation
      "modificatedDate": "03/05/2019 13:57",	// Date of Modification
      "filetype": "bbuilderani",			// Encoder Call
      "aniversion": 1,				// Encoder Call
      "copyright": "2015 iAppsBeats LTD",		// Copyright Notice
    
      "options": {
        "looping": 1,				// Can be 0 or 1, defines if it plays once or forever
        "continuous": 1,				// No Idea about that one, but probably to add onto other animations flawlessly
        "center": [24,32],				// x,y position that defines the center of the Bani
        "blockingbounds": [0,0,32,32],		// Defines the xoffset,yoffset,width,heigth Hitbox
        "nameoffsety": 45				// Position of the Nickname of NPC/Character
      },
    
      "defaults": {
    
    //Default Library definitions to read from the Database
    
        "BODY": "elkbodynew3.png",			
        "HEAD": "elkihead.gif",
        "HAT": "hatelkhalonew.png",
        "CIRCLE": "circle.png"
      },
    
      "sprites": {
    //        Array Explanation
    //  	"Sprite ID": {"TYPE": "FILENAME.extension",
    	"Bounds = CUT POSITIONS": [x offset,y offset,width,height]},
    	"scale": [SCALE by factor for X, Scale by factor for Y],
    	"rotation": [ROTATION in Degree, Pivot X, Pivot Y]},		
    
    // Pivot means, that from the point of the Image, it defines the Point from 
    // where the Rotationpoint or generally Actionpoint is defined within the Sprite
    // Since my Circle is 256x256 Pixels, and I want it to rotate from the middle of the image, the Pivot for x&y is 128 Pixels.
    
     	// Bounds, Type, and Modifications can be in any order.
    
        "0": {"gfx": "bbuilder_bomb.png","bounds": [0,48,48,26]}, 							// Shadowgraphic	
        "1": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [0,128,128]},		// Circle with 0 Degree Rotation, 0.9 Factor Skewed vertically
        "2": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [10,128,128]},		// Circle with 10 Degree Rotation, 0.9 Factor Skewed vertically
        "3": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [20,128,128]},		// Circle with 20 Degree Rotation, 0.9 Factor Skewed vertically
        "4": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [30,128,128]},		// Circle with 30 Degree Rotation, 0.9 Factor Skewed vertically
        "5": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [40,128,128]},		// Circle with 40 Degree Rotation, 0.9 Factor Skewed vertically
        "6": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [50,128,128]},		// Circle with 50 Degree Rotation, 0.9 Factor Skewed vertically
        "7": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [60,128,128]},		// Circle with 60 Degree Rotation, 0.9 Factor Skewed vertically
        "8": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [70,128,128]},		// Circle with 70 Degree Rotation, 0.9 Factor Skewed vertically
        "9": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [80,128,128]},		// Circle with 80 Degree Rotation, 0.9 Factor Skewed vertically
        "10": {"bounds": [null,null,256,256],"gfx": "circle.png","scale": [1,0.9],"rotation": [90,128,128]},	// Circle with 90 Degree Rotation, 0.9 Factor Skewed vertically
        "22": {"gfx": "HEAD","bounds": [0,0,48,48]},
        "50": {"gfx": "BODY","bounds": [0,96,48,48]},
        "302": {"gfx": "HAT","bounds": [0,0,48,60]}
      },
    
    // Frame Array, its easier to add/copy/delete Frames this way in Notepad imo
    
      "frames": [
    
    // From this point on until the } is counted as 1 Frame
    
        {
          "directions":
    [
    //Directions & Position Array starting at the [, technically you could add more in here, 
    //depending on what the encoder is defined to do with them, could add diagonals too
    //And the order is important too, like, [[1],[2],[3]] that is one direction, with 3 objects inside, number 3 would be on the top //layer, and 1 on the bottom, so the order is important too
    
    //Up Direction
    
    [],
    //Left Direction
    
    [],
    
    //Down Direction (Main, in this Case)
    [["Sprite ID",X OFFSET,Y OFFSET]],	// Can add here as many Sprites as you want within the [], seperated by a Comma
    
    //Right Direction
    []
    ],
    // Duration in milliseconds for the Frame
          "duration": 50
    //Ending Definitions for Frame 1
        },
        {
          "directions":
    [
    [], //Empty Up
    [], //Empty Left
    [[],[],[],[],[]], //Empty Down
    []  //Empty Right
    ],
        },
      ]
    }
    

    And last but not least, you can beautify your JSON (Bani) Scripts here:

    https://codebeautify.org/jsonviewer/29b2dd

    Hope it helped a little



  • Wallet always been the plug on animating. Goodjob!


Log in to reply