GithubHelp home page GithubHelp logo

neeeoo / funkin-packer Goto Github PK

View Code? Open in Web Editor NEW

This project forked from odrick/free-tex-packer

24.0 2.0 5.0 232.75 MB

Funkin Packer

Home Page: https://neeeoo.github.io/funkin-packer/

License: MIT License

JavaScript 86.63% PHP 4.43% CSS 8.27% HTML 0.67%
packing spritesheet spritesheet-packer

funkin-packer's Introduction

Funkin Packer

logo

Funkin packer creates sprite sheets for you game or site. Rotation, trimming, multipacking, various export formats (json, xml, css, pixi.js, godot, phaser, cocos2d). Zip support. Split sheet tool.

screenshot

Web version: https://neeeoo.github.io/funkin-packer/

Custom templates

Free texture packer uses mustache template engine.

There are 3 objects passed to template:

rects (Array) list of sprites for export

prop type description
name String sprite name
frame Object frame info (x, y, w, h, hw, hh)
rotated Boolean sprite rotation flag
trimmed Boolean sprite trimmed flag
spriteSourceSize Object sprite source size (x, y, w, h)
sourceSize Object original size (w, h)
first Boolean first element in array flag
last Boolean last element in array flag

config (Object) current export config

prop type description
imageWidth Number texture width
imageHeight Number texture height
scale Number texture scale
format String texture format
imageName String texture name
imageFile String texture file (name with extension)
base64Export Boolean base64 export flag
base64Prefix String prefix for base64 string
imageData String base64 image data

appInfo (Object) application info

prop type description
displayName String App name
version String App version
url String App url

Example:

{
  "frames": {
    {{#rects}}
    "{{{name}}}": {
      "frame": {
        "x": {{frame.x}},
        "y": {{frame.y}},
        "w": {{frame.w}},
        "h": {{frame.h}}
      },
      "rotated": {{rotated}},
      "trimmed": {{trimmed}},
      "spriteSourceSize": {
        "x": {{spriteSourceSize.x}},
        "y": {{spriteSourceSize.y}},
        "w": {{spriteSourceSize.w}},
        "h": {{spriteSourceSize.h}}
      },
      "sourceSize": {
        "w": {{sourceSize.w}},
        "h": {{sourceSize.h}}
      },
      "pivot": {
        "x": 0.5,
        "y": 0.5
      }
    }{{^last}},{{/last}}
    {{/rects}}
  },
  "meta": {
    "app": "{{{appInfo.url}}}",
    "version": "{{appInfo.version}}",
    "image": "{{config.imageFile}}",
    "format": "{{config.format}}",
    "size": {
      "w": {{config.imageWidth}},
      "h": {{config.imageHeight}}
    },
    "scale": {{config.scale}}
  }
}

funkin-packer's People

Contributors

odrick avatar playtomax-team avatar neeeoo avatar rtalon83 avatar dadekuma avatar piratesephiroth avatar philskat avatar wen- avatar and3md avatar

Stargazers

 avatar Cobalt Bar avatar well... avatar  avatar Eric avatar AppleHair avatar GuineaPigUuhh avatar Woktopus [Etchy] avatar  avatar Rodney, An Imaginative Person avatar Tormented avatar Pakie Bailey avatar  avatar  avatar  avatar Joalor64 avatar prophamoon avatar Rafa Laguna avatar Miss Circle (Moxie) avatar Notbeep-,- avatar Doggo avatar L S avatar Jamextreme140 avatar nom avatar

Watchers

Rafa Laguna avatar Miss Circle (Moxie) avatar

funkin-packer's Issues

OK SO IT WONT WORK.

YEA FNF CRASHES WHENEVER I USE THIS AND I KNOW WHY ITS CUZ THE XML AINT LIKE ADOBE ANIMATE AND SO IT CRASHES PLZ FIX!!!!!!!!!!!

Building problems

By the way, how to build this thing, please give me a tutorial, thank you?

CLI tool

funkinpacker -bp 1 -sp 3 -nr -e Sparrow -o texture combo/

-bp = border padding
-sp = symbol padding
-nr = no rotation
-e = export format
-o = output file

funkinpacker -r BOYFRIEND.png BOYFRIEND.xml -rm Sparrow

-r = repack
-rm = repack method
-e = export to folder (works differently when using -r)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.