Giter Club home page Giter Club logo

laliasprite's Introduction

# Laliasprite v 2.0.0 - (sprite atlases support)
  • Laliasprite is a PhaserJS based tool-framework that helps you to generate hitboxes for your 2D game characters and setup interactions with them (when animation is playing for example)

Preview

  • Phaser JS
  • SVG.JS
  • some Magic

New Features!

  • Support sprite atlases
  • Support sprite scaling

Usage

A. Download and test this example to see interactions.

B. or FOLLOW THESE STEPS

STEP 1. Run Locally (server) the project in /tool folder

You can use wamp | xamp | mamp

.Two files are generated : yoursprite.png (in /sprites folder) and yoursprite.json (in /json folder)

STEP 2 . Create your new PhaserJS game project

a. Write this in your index.html

    ...
    //Load phaser.js (first)
    <script src="js/phaser.js"></script>
    //Load laliasprite.js*/
    <script src="js/laliasprite-2.0.js"></script>
    
    //NB : in laliasprite.js ,comment "box.alpha = 0;" to see hitboxes
 

b. In your preload function , do this

    //Create new Lalia instance
     Lalia = new Lalia();
     
    //Load sprite atlases or spritesheet
    //load atlases
     Lalia.atlas(game, "jogoy", 'img/jogoy_atlas.png', 'json/jogoy_atlas.json', 'json/jogoy_atlas_hitboxes.json' );
   
    //load sheet
    //Lalia.sheet(game, "jogoy", 'img/jogoy_sheet.png', 'json/sheet_hitboxes.json', 180, 240);
    
   
 

c. In your create function , do this

    //Add sprite to game scene
    jogoysprite = game.add.sprite(100, 30, 'jogoy');
    ...
    //Add animation to sprite
    jogoysprite.animations.add("idle", ["1" ,"2", "3"],1, false);
        
    //Setting jogoysprite hitboxes for a specific animation (frames);
    Lalia.atlasboxes(jogoysprite, 'idle');
    //Lalia.sheetboxes(jogoysprite, 'idle');
    ...
    //Add other characters 
    hitter = game.add.sprite(130, 40, 'mario');
    ...
    //Set objects which will collide with our character (jogoysprite) hitboxes 
    jogoyColliders.push(hitter);
    //jogoyColliders is the array you will declare in your code to store colliders
    ...
     
  

d. Create your action callback

    //Do this when jogoysprite is touched at a certain point during "idle" animation
      function die()
      {
         //Kill jogoysprite
      }
    

e. In your update function, do this :

   //On button taped or keyboard event
    jogoysprite.animations.playaction('idle','hit', jogoyColliders, die);
   
   //This means: When jogoysprite is playing 'idle' animation, when it's hitboxes having the type 'hit' are touched
   //by one of the objects in jogoyColliders array then call the 'die' function to execute a specific action (To die in this example)
   ...
  
    

Remarks

Laliasprite works better with non-minified version of Phaser

Techs links
PhaserJS [https://phaser.io/]
SVGJS [http://svgjs.com/]
DomToImg [https://github.com/tsayen/dom-to-image]
PHP
some Magic :)

Development

Want to contribute? Great!

Let's help to improve this tool-framework ! Just fork it.

Useful sample scenarios

License

MIT License

** Made at kayelsoft with some dakhaar , :) !

laliasprite's People

Contributors

shadoworker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

vijou2 macga

laliasprite's Issues

Where is usage_phaser.js

Hey Shadoworder! Thanks for this tool, it might solve all my problems.

I'm trying to make a simplified Street Fighter 3-esque fighting game in phaser. I couldn't find an easier way to make hitboxes for all the moves than this tool that you created.

You mention that all the functions are in usage_phaser.js but I can't find it in this project. Where is it?

How to export json

image

I have a sprite sheet already loaded and I tried adding a hitbox and hit "generate", but no json file was generating. It only generated a spritesheet at the bottom left.

Does LaliaSprite work with Sprite Atlases?

I have found that using a sprite atlas is better than using a sprite sheet for my games because a sprite atlas consumes less memory.

I compiled a bunch of movement animations in this sprite atlas below, but it will get bigger as I add attacks.

The sprite atlas is one image file with all the sprites already baked into it.

Is it still possible to use LaliaSprite with this file to create hitboxes?

image

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.