Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azerion/phaser-responsive
Adds a set of responsive objects to Phaser that can be pinned to
https://github.com/azerion/phaser-responsive
phaser phaser-plugin
Last synced: 5 days ago
JSON representation
Adds a set of responsive objects to Phaser that can be pinned to
- Host: GitHub
- URL: https://github.com/azerion/phaser-responsive
- Owner: azerion
- License: mit
- Created: 2016-01-28T15:37:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-07-27T08:12:25.000Z (about 8 years ago)
- Last Synced: 2024-04-24T00:32:05.043Z (5 months ago)
- Topics: phaser, phaser-plugin
- Language: TypeScript
- Size: 385 KB
- Stars: 25
- Watchers: 8
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Phaser Responsive
================
Phaser-Responsive plugin adds images/sprites/buttons/groups that can be pinned to corners/sides/center!
NOTICE
------
This repo is depecrated in favor of Phasers alignIn / alignTo methods introduced in [email protected]
Getting Started
---------------
First you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy.
```
npm install phaser-responsive --save-dev
```
Next up you'd want to add it to your list of js sources you load into your game
```html
```
Usage
-----
### Load the plugin
You still need to load the plugin in your game. This is done just like any other plugin in Phaser
```javascript
game.plugins.add(Fabrique.Plugins.Responsiveness);
```
The plugin will patch your Phaser game with additional load/add/make methods so the responsive objects fits up in Phaser like any normal object!
### Create responsive objects
Add an image, text, button or sprite as you would in Phaser, adding 'responsive' in front of the name.
When creating them, add a pin position in the parameters which can be either the middle of the canvas or one of it's edges.
The available pin positions are:
* topLeft
* topCenter
* topRight
* middleLeft
* middleCenter
* middleRight
* bottomLeft
* bottomCenter
* bottomRight
Then, set an anchor point to align the corner of the image/text/button/sprite with the corner of the canvas.
```javascript
sampleImage = game.add.responsiveImage(5, 5, 'square', null, Fabrique.PinnedPosition.bottomRight);
sampleImage.anchor.set(1, 1);
```
```javascript
spriteButton = game.add.responsiveButton(5,5, 'leaderboard', this.myCallBack,this,0,0,0,0, Fabrique.PinnedPosition.bottomRight);
spriteButton.anchor.setTo(1,1);
```
### Set scaling for objects
By setting the landscape/portrait scaling for an object, the object will be scaled a certain percentage of the width or height of the total game.
By default the width will be used, if you want the object to scale according to the height, you can pass the second parameter as false.
The scaling will only be done on mobile, if you want the objects to be scaled when your game is running on desktop you can pass the third parameter as true.
In the next example the sampleImage will always be 50% of the game width in landscape and 50% of the game height in portrait.
```javascript
sampleImage = game.add.responsiveImage(5, 5, 'square', null, Fabrique.PinnedPosition.bottomRight);
sampleImage.setLandscapeScaling(50, true, false);
sampleImage.setPortraitScaling(50, false, false);
```
### Relative pinned position
If you want the offset of your objects to be relative to the game size you can also pass a pinned position and an x and y offset to the landscape/portrait scaling.
In the next example the sampleImage will always be 20% of the game width and be positioned to the middle left.
When the image is the original size the offset will be 100px, when the image is scale the 100px will be relative to the scaling.
```javascript
sampleImage = game.add.responsiveImage(5, 5, 'square', null);
sampleImage.setLandscapeScaling(20, true, false, Fabrique.PinnedPosition.middleLeft, 100, 0);
sampleImage.setPortraitScaling(20, true, false, Fabrique.PinnedPosition.middleLeft, 100, 0);
```
Changelog
---------
### 1.3.0
* Pinned position offset is now relative to portrait/landscape scaling
### 1.2.0
* Objects can now store their portrait/landscape special scaling values
### 1.1.0
* Added static dynamic scaling method
### 1.0.1
* Initial release
Disclaimer
----------
We at OrangeGames just love playing and creating awesome games. We aren't affiliated with Phaser.io. We just needed some awesome objects that needed to be responsive in our awesome HTML5 games. Feel free to use it for enhancing your own awesome games!