Skip to content

Commit 7a35f1a

Browse files
jmgasperjmgasper
committed
Consolidating and updating
1 parent 42269ed commit 7a35f1a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+4519
-40281
lines changed

‎README.md

Lines changed: 111 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,111 @@
1-
## Description
2-
3-
This project is an additional drawing target to Pixi.js (pixijs.com) that adds pxscene drawing in addition to WebGL and Canvas2D.
4-
5-
6-
Pixi.js Patch apply
7-
==============
8-
### Build pixi
9-
10-
(1) Clone the pixi project
11-
```
12-
git clone https://github.com/pixijs/pixi.js.git
13-
cd pixi.js
14-
git checkout bed84b9ff04cf98c536401d36841d447b74917fe
15-
```
16-
17-
(2) Copy /pxscene_pixi.patch into the repository folder (pixi.js) and patch
18-
```
19-
git apply pxscene_pixi.patch
20-
```
21-
22-
(3) Install dependencies and build pixi
23-
```
24-
npm i
25-
npm run dist -- --exclude deprecation
26-
```
27-
28-
The pixi will be built and generated in pixi.js/dist
29-
30-
## Install pxscene
31-
32-
pxscene can be downloaded from http://pxscene.org
33-
34-
## Deployment
35-
36-
Two separate projects are available:
37-
- pxPixi: for hosting pixi.js and assets (https://github.com/topcoderinc/pxPixi)
38-
- pxPixi-examples: the other for hosting examples (https://github.com/topcoderinc/pxPixi-examples)
39-
40-
The deployment instructions are easy, switch to just type the following command:
41-
```
42-
git init
43-
git add .
44-
git commit -m "init"
45-
heroku create
46-
git push heroku master
47-
```
48-
49-
**Note**:
50-
(1) If you modified and built pixi.js, please copy pixi.js/dist/* to /pixi-server/dist/pixi and update it on Heroku.
51-
(2) When you have deployed <submission>/pixi-server to Heroku, you should replace `ASSET_URL` in /example-server/dist/.js (all the example files) to the host URL of pixi-server. And also note that use the protocol to `http://` instead of `https://`.
52-
53-
## Heroku examples
54-
55-
- Basic: http://pxscene-pixi-examples.herokuapp.com/basics/basic.js
56-
- Container: http://pxscene-pixi-examples.herokuapp.com/basics/container.js
57-
- Container Pivot: http://pxscene-pixi-examples.herokuapp.com/basics/container-pivot.js
58-
- Spritesheet Animation: http://pxscene-pixi-examples.herokuapp.com/basics/spritesheet.js
59-
- Click: http://pxscene-pixi-examples.herokuapp.com/basics/click.js
60-
- Tiling Sprite: http://pxscene-pixi-examples.herokuapp.com/basics/tiling-sprite.js
61-
- Text: http://pxscene-pixi-examples.herokuapp.com/basics/text.js
62-
- Textured Mesh: http://pxscene-pixi-examples.herokuapp.com/basics/textured-mesh.js
63-
- Graphics: http://pxscene-pixi-examples.herokuapp.com/basics/graphics.js
64-
- Render Texture: http://pxscene-pixi-examples.herokuapp.com/basics/render-texture.js
65-
- Display Z Order: http://shrouded-castle-71808.herokuapp.com/display/z-order.js
66-
- Layers Z Order: http://shrouded-castle-71808.herokuapp.com/layers/z-order.js
67-
- Layers Lighting: http://shrouded-castle-71808.herokuapp.com/layers/lighting.js
68-
- Spine Dragon: http://shrouded-castle-71808.herokuapp.com/spine/dragon.js
69-
- Spine Goblin: http://shrouded-castle-71808.herokuapp.com/spine/goblins.js
70-
- Spine Dragon: http://shrouded-castle-71808.herokuapp.com/spine/pixie.js
71-
- Spine Spineboy: http://shrouded-castle-71808.herokuapp.com/spine/spineboy.js
72-
73-
Open pxscene and enter the URL of each example to the input box and press return, you will see the results.
74-
75-
## Plugins
76-
Some examples need extra plugins' support, and there're extra patchs for these plugins to work with pxscene.
77-
78-
Examples|plugin|plugin source|patch file|patch base
79-
--------|------|-------------|----------|----------
80-
Display Z Order |pixi-display |https://github.com/pixijs/pixi-display/tree/master |pixi-display.patch | branch master and commit b0898bf208431badfd2448cf2dc965a24de39ef8
81-
Layers Z Order and Layers Lighting |pixi-layers |https://github.com/pixijs/pixi-display/tree/layers |pixi-layers.patch | branch layers and commit 0f812e3e6a16c6883c278aae6f1d719f12052862
82-
All Spine examples |pixi-spine |https://github.com/pixijs/pixi-spine |pixi-spine.patch |branch master and commit bc64e3e6f3784f5eda1094ddc283561eb63ab3d3
83-
84-
## Limitations
85-
86-
(1) When hover on clickable object, the cursor cannot be changed in pxscene.
87-
(2) Pxscene text doesn't support stroke and gradient color. The shadow doesn't support blue effect.
88-
(3) Pxscene text doesn't support to use font family name directly. Instead, we need to design a font URL to it. So we cannot assign `BOLD` or `ITALIC` style to the text.
89-
90-
For complying with the given text usage, I added a map to mapping fontFamily names to the font URL. Please check the pixi.js/text/TextV8.js
91-
92-
```
93-
// Map: font family name -> fontUrl
94-
// Set key lowercase
95-
const fontFamilyUrlMap = {
96-
dejavusans: 'http://www.pxscene.org/examples/px-reference/fonts/DejaVuSans.ttf',
97-
arial: 'http://www.pxscene.org/examples/px-reference/fonts/DejaVuSans.ttf',
98-
};
99-
```
100-
Currently, it only supports Arial and DejaVuSans.
101-
102-
(4) Layers Lighting example lack of lighting effect, because PXScene does not support filter yet.
103-
104-
## Remarks
105-
(1) If you use the example in Heroku, you may need to wait several seconds for the resource downloading.
106-
(2) For showing text, you may still need to wait several seconds because the font URL is remote.
107-
(3) The updated pixi.js supports both browsers and pxscene.
1+
## Description
2+
3+
This project is an additional drawing target to Pixi.js (pixijs.com) that adds pxscene drawing in addition to WebGL and Canvas2D.
4+
5+
6+
Pixi.js Patch apply
7+
==============
8+
### Build pixi
9+
10+
(1) Clone the pixi project
11+
```
12+
git clone https://github.com/pixijs/pixi.js.git
13+
cd pixi.js
14+
git checkout bed84b9ff04cf98c536401d36841d447b74917fe
15+
```
16+
17+
(2) Copy /pxscene_pixi.patch into the repository folder (pixi.js) and patch
18+
```
19+
git apply pxscene_pixi.patch
20+
```
21+
22+
(3) Install dependencies and build pixi
23+
```
24+
npm i
25+
npm run dist -- --exclude deprecation
26+
```
27+
28+
The pixi will be built and generated in pixi.js/dist
29+
30+
## Install pxscene
31+
32+
pxscene can be downloaded from http://pxscene.org
33+
34+
## Local Deployment
35+
36+
you don't need wait network if you deployment examples on local , sometimes Heroku return timeout if your network not very good.
37+
38+
```javascript
39+
npm install -g http-server
40+
cd pxPixi
41+
node update_assets_url.js http://127.0.0.1:8081
42+
cd dist
43+
http-server -p 8081
44+
```
45+
46+
## Deployment
47+
- pxPixi: for hosting pixi.js,assets and examples (https://github.com/topcoderinc/pxPixi)
48+
- The deployment instructions are easy, switch to just type the following command:
49+
50+
```shell
51+
git init
52+
git add .
53+
git commit -m "init"
54+
heroku create
55+
git push heroku master
56+
```
57+
58+
After you have deployed <submission>/pxPixi to Heroku,you need use `node update_assets_url.js http://you-heroku-url.com` to update all examples ASSSETS_URL,note that use the protocol to `http://` instead of `https://`, then push again
59+
60+
```shell
61+
node update_assets_url.js <your-Heroku-host>
62+
git add .
63+
git commit -m "update assets url"
64+
git push heroku master
65+
```
66+
67+
68+
69+
**Note**:
70+
(1) If you modified and built pixi.js, please copy pixi.js/dist/* to pxPixi/dist/pixi and update it on Heroku.
71+
(2) make sure you use the protocol to `http://` instead of `https://`.
72+
73+
74+
## Heroku examples
75+
- Basic: http://agile-depths-26078.herokuapp.com/basics/basic.js
76+
- Container: http://agile-depths-26078.herokuapp.com/basics/container.js
77+
- Container Pivot: http://agile-depths-26078.herokuapp.com/basics/container-pivot.js
78+
- Spritesheet Animation: http://agile-depths-26078.herokuapp.com/basics/spritesheet.js
79+
- Click: http://agile-depths-26078.herokuapp.com/basics/click.js
80+
- Tiling Sprite: http://agile-depths-26078.herokuapp.com/basics/tiling-sprite.js
81+
- Text: http://agile-depths-26078.herokuapp.com/basics/text.js
82+
- Textured Mesh: http://agile-depths-26078.herokuapp.com/basics/textured-mesh.js
83+
- Graphics: http://agile-depths-26078.herokuapp.com/basics/graphics.js
84+
- Render Texture: http://agile-depths-26078.herokuapp.com/basics/render-texture.js
85+
- Display Z Order: http://agile-depths-26078.herokuapp.com/display/z-order.js
86+
- Layers Z Order: http://agile-depths-26078.herokuapp.com/layers/z-order.js
87+
- Layers Lighting: http://agile-depths-26078.herokuapp.com/layers/lighting.js
88+
- Spine Dragon: http://agile-depths-26078.herokuapp.com/spine/dragon.js
89+
- Spine Goblin: http://agile-depths-26078.herokuapp.com/spine/goblins.js
90+
- Spine Dragon: http://agile-depths-26078.herokuapp.com/spine/pixie.js
91+
- Spine Spineboy: http://agile-depths-26078.herokuapp.com/spine/spineboy.js
92+
93+
Open pxscene and enter the URL of each example to the input box and press return, you will see the results.
94+
95+
## Plugins
96+
Some examples need extra plugins' support, and there're extra patchs for these plugins to work with pxscene.
97+
98+
| Examples | plugin | plugin source | patch file | patch base |
99+
| ---------------------------------- | ------------ | ---------------------------------------- | ------------------ | ---------------------------------------- |
100+
| Display Z Order | pixi-display | https://github.com/pixijs/pixi-display/tree/master | pixi-display.patch | branch master and commit b0898bf208431badfd2448cf2dc965a24de39ef8 |
101+
| Layers Z Order and Layers Lighting | pixi-layers | https://github.com/pixijs/pixi-display/tree/layers | pixi-layers.patch | branch layers and commit 0f812e3e6a16c6883c278aae6f1d719f12052862 |
102+
| All Spine examples | pixi-spine | https://github.com/pixijs/pixi-spine | pixi-spine.patch | branch master and commit bc64e3e6f3784f5eda1094ddc283561eb63ab3d3 |
103+
104+
## Limitations
105+
106+
(1) When hover on clickable object, the cursor cannot be changed in pxscene.
107+
(2) Layers Lighting example lack of lighting effect, because PXScene does not support filter yet.
108+
109+
## Remarks
110+
(1) If you use the example in Heroku, you may need to wait several seconds for the resource downloading.
111+
(2) The updated pixi.js supports both browsers and pxscene.

‎dist/basics/basic.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const ASSET_URL = 'http://127.0.0.1:8081';
2+
const PIXI_PATH = ASSET_URL + '/pixi/';
3+
const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png';
4+
5+
px.configImport({"pxFramework:": PIXI_PATH});
6+
px.import({ scene: 'px:scene.1.js',
7+
pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) {
8+
9+
var scene = imports.scene;
10+
var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb, view: scene});
11+
12+
var bunny = PIXI.Sprite.fromImage(BUNNY_IMAGE_PATH);
13+
14+
// center the sprite's anchor point
15+
bunny.anchor.set(0.5);
16+
17+
// move the sprite to the center of the screen
18+
bunny.x = app.renderer.width / 2;
19+
bunny.y = app.renderer.height / 2;
20+
21+
console.log(app.renderer.width);
22+
23+
app.stage.addChild(bunny);
24+
25+
app.ticker.add(function(delta) {
26+
// just for fun, let's rotate mr rabbit a little
27+
// delta is 1 if running at 100% performance
28+
// creates frame-independent tranformation
29+
bunny.rotation += 0.1 / delta;
30+
});
31+
32+
}).catch( function importFailed(err){
33+
console.error("Import failed: ", err);
34+
});

‎dist/basics/click.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const ASSET_URL = 'http://127.0.0.1:8081';
2+
const PIXI_PATH = ASSET_URL + '/pixi/';
3+
const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png';
4+
5+
px.configImport({"pxFramework:": PIXI_PATH});
6+
px.import({ scene: 'px:scene.1.js',
7+
pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) {
8+
9+
var scene = imports.scene;
10+
var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb, view: scene});
11+
12+
// Scale mode for all textures, will retain pixelation
13+
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
14+
15+
var sprite = PIXI.Sprite.fromImage(BUNNY_IMAGE_PATH);
16+
17+
// Set the initial position
18+
sprite.anchor.set(0.5);
19+
sprite.x = app.renderer.width / 2;
20+
sprite.y = app.renderer.height / 2;
21+
22+
// Opt-in to interactivity
23+
sprite.interactive = true;
24+
25+
// Shows hand cursor
26+
sprite.buttonMode = true;
27+
28+
// Pointers normalize touch and mouse
29+
sprite.on('pointerdown', onClick);
30+
31+
// Alternatively, use the mouse & touch events:
32+
// sprite.on('click', onClick); // mouse-only
33+
// sprite.on('tap', onClick); // touch-only
34+
35+
36+
app.stage.addChild(sprite);
37+
38+
function onClick () {
39+
sprite.scale.x *= 1.25;
40+
sprite.scale.y *= 1.25;
41+
}
42+
43+
}).catch( function importFailed(err){
44+
console.error("Import failed: ", err);
45+
});

‎dist/basics/container-pivot.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const ASSET_URL = 'http://127.0.0.1:8081';
2+
const PIXI_PATH = ASSET_URL + '/pixi/';
3+
const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png';
4+
5+
px.configImport({"pxFramework:": PIXI_PATH});
6+
px.import({ scene: 'px:scene.1.js',
7+
pixi: 'pxFramework:pixi.js' }).then( function ready(imports) {
8+
9+
var scene = imports.scene;
10+
var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, view: scene});
11+
12+
var container = new PIXI.Container();
13+
14+
app.stage.addChild(container);
15+
16+
// Create a new texture
17+
var texture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH);
18+
19+
// Create a 5x5 grid of bunnies
20+
for (var i = 0; i < 25; i++) {
21+
var bunny = new PIXI.Sprite(texture);
22+
bunny.anchor.set(0.5);
23+
bunny.x = (i % 5) * 40;
24+
bunny.y = Math.floor(i / 5) * 40;
25+
container.addChild(bunny);
26+
}
27+
28+
// move container to the center
29+
container.x = app.renderer.width / 2;
30+
container.y = app.renderer.height / 2;
31+
32+
// Center bunny sprite in local container coordinates
33+
container.pivot.x = container.width / 2;
34+
container.pivot.y = container.height / 2;
35+
36+
// Listen for animate update
37+
app.ticker.add(function(delta) {
38+
// rotate the container!
39+
// use delta to create frame-independent tranform
40+
container.rotation -= 0.01 / delta;
41+
});
42+
43+
}).catch( function importFailed(err){
44+
console.error("Import failed: ", err);
45+
});

‎dist/basics/container.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const ASSET_URL = 'http://127.0.0.1:8081';
2+
const PIXI_PATH = ASSET_URL + '/pixi/';
3+
const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png';
4+
5+
px.configImport({"pxFramework:": PIXI_PATH});
6+
px.import({ scene: 'px:scene.1.js',
7+
pixi: 'pxFramework:pixi.js' }).then( function ready(imports) {
8+
9+
var scene = imports.scene;
10+
var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, view: scene});
11+
12+
var container = new PIXI.Container();
13+
14+
app.stage.addChild(container);
15+
16+
var texture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH);
17+
18+
// Create a 5x5 grid of bunnies
19+
for (var i = 0; i < 25; i++) {
20+
var bunny = new PIXI.Sprite(texture);
21+
bunny.anchor.set(0.5);
22+
bunny.x = (i % 5) * 40;
23+
bunny.y = Math.floor(i / 5) * 40;
24+
container.addChild(bunny);
25+
}
26+
27+
// Center on the screen
28+
container.x = (app.renderer.width - container.width) / 2;
29+
container.y = (app.renderer.height - container.height) / 2;
30+
31+
}).catch( function importFailed(err){
32+
console.error("Import failed: ", err);
33+
});

0 commit comments

Comments
 (0)