https://github.com/webcaetano/craft

Phaser Library with utility chainable functions
https://github.com/webcaetano/craft

game-development phaser phaser-plugin phaserjs

Last synced: 4 months ago
JSON representation

Phaser Library with utility chainable functions

• Host: GitHub
• URL: https://github.com/webcaetano/craft
• Owner: webcaetano
• License: mit
• Created: 2016-01-19T15:04:06.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-17T00:31:06.000Z (about 7 years ago)
• Last Synced: 2024-09-29T23:49:59.178Z (4 months ago)
• Topics: game-development, phaser, phaser-plugin, phaserjs
• Language: JavaScript
• Homepage: http://webcaetano.github.io/craft
• Size: 1.14 MB
• Stars: 29
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![File Size][filesize-url]

[![npm][npm-img]][npm-url]

![Bower version][bower-url]



	



 Craft 




	

		

		Phaser Library with utility chainable functions


		Exported as a UMD module. (accept global, es6, webpack, browserify)

		

	



## Installation

```

npm install phaser-craft

bower install phaser-craft --save

```

## Examples 

#### Example1 

```javascript

var craft = require('phaser-craft')(game); // you also can call craft via global var

var group = craft.$g(); //create group

var sprite = craft.$sprite('phaserDude') //create sprite with key

.$set({ // change attributes

	x:100,

	y:100

})

.$mid() // change anchor to center

.$tint('#FF0000') // change color

.$into(group); // insert into group

//You can keep using Phaser

sprite.x = 150;

//You can use the prototypes without a chain

sprite.$set({

	y:150

});

```

#### Example2

```javascript

// var craft = craft(game); // global

// import $craft from 'phaser-craft'; var craft = $craft(game); // ES6

var craft = require('phaser-craft')(game); // requireJS

var group = craft.$g(); //create group

var rect = craft.$rect({ //create rectangle

	width:200,

	height:150,

	fill:'#9517C5', //setup retancle fill color

})

.$align('center','center') // align it to center 

.$into(group) // insert into group 

var ball = craft.$circle({ //create circle

	fill:'#ffffff',

	size:100 // radius

}).$set({ // change attributes

	x:150,

	y:150,

})

.$into(group) // insert into group 

var d = craft.$d().$copyPos(ball); // create a dot and copy position of ball

```

## Documentation 

[http://webcaetano.github.io/craft](http://webcaetano.github.io/craft)

## Development 

Clone the repo `https://github.com/webcaetano/craft-examples`


On craft-examples `npm install` and `gulp`


On craft `npm install` and `npm run start` 


To create a production version `npm run build`

> Important: Ensure that both repos live at the same depth in your directory structure. For example: /usr/home/web/craft-examples and /usr/home/web/craft. This is so the dev build scripts in the Craft repo can safely copy files to ../craft-examples, and they end up in the correct place.

#### See Also

- [**phaser-utils**](https://github.com/webcaetano/phaser-utils)

- [**phaser-boilerplate**](https://github.com/webcaetano/phaser-boilerplate)

- [**phaser-electron**](https://github.com/webcaetano/phaser-electron)

- [**craft-website**](https://github.com/webcaetano/craft-website)

- [**craft-examples**](https://github.com/webcaetano/craft-examples)

[npm-url]: https://npmjs.org/package/phaser-craft

[npm-img]: https://img.shields.io/npm/v/phaser-craft.svg?style=flat-square

[filesize-url]: https://img.shields.io/github/size/webcaetano/craft/build/phaser-craft.min.js.svg?style=flat-square&color=green

[bower-url]: https://img.shields.io/bower/v/phaser-craft.svg?style=flat-square