Update all examples to use PIXI.Application, remove v3 examples #24

bigtimebuddy · 2017-01-23T20:54:24Z

Changes

Updated to use the PIXI.Application API in the latest version of PIXI
Removes the v3 examples
Removes _details.json, which are unneeded
Fixes the size of the RenderTexture example
Replace the use of position point with x, y getters/setters
Use pointer events instead of mouse & touch
Added tap/click-to-start for the video example

themoonrat · 2017-01-25T06:53:16Z

manifest.json

            "title": "Custom Filter",
            "entry": "custom-filter.js"
        }
    ],
    "demos": [
        {
-            "title": "MovieClip",
+            "title": "AnimatedSprite",
            "entry": "movieclip-demo.js"


Worth changing filename?

themoonrat · 2017-01-25T06:55:37Z

required/examples/basics/spritesheet.js

    // create a MovieClip (brings back memories from the days of Flash, right ?)
-    movie = new PIXI.extras.MovieClip(frames);
+    var movie = new PIXI.extras.AnimatedSprite(frames);


change var name and comment below about what a movie clip is

themoonrat · 2017-01-25T06:56:27Z

required/examples/demos/movieclip-demo.js

         var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i+1) + '.png');
         explosionTextures.push(texture);
    }

-    for (i = 0; i < 50; i++)
-    {
+    for (i = 0; i < 50; i++) {
        // create an explosion MovieClip


Another movie clip reference

themoonrat · 2017-01-25T06:59:49Z

required/examples/basics/basic.js


+// Listen for animate update
+app.ticker.add(function() {
    // just for fun, let's rotate mr rabbit a little
    bunny.rotation += 0.1;


Would we want to show best practice by using time delta here for a frame rate independent transform?

themoonrat · 2017-01-25T07:00:59Z

required/examples/basics/container-pivot.js

-    requestAnimationFrame(animate);
-
+// Listen for animate update
+app.ticker.add(function() {
    //rotate the container!
    container.rotation -= 0.01;


Would we want to show best practice by using time delta here for a frame rate independent transform?

themoonrat · 2017-01-25T07:10:11Z

required/examples/picture/border-artifacts.js

-}
+	app.stage.addChild(pic);
+	app.start();
+});


No end of file new line?

themoonrat · 2017-01-25T07:11:58Z

required/examples/demos/video.js

-// create the root of the scene graph
-var stage = new PIXI.Container();
+var app = new PIXI.Application(800, 600, { transparent: true });
+document.body.appendChild(app.view);

 // create a video texture from a path
 var texture = PIXI.Texture.fromVideo('testVideo.mp4');

 // create a new Sprite using the video texture (yes it's that easy)
 var moveSprite = new PIXI.Sprite(texture);


I guess this was supposed to be movieSprite rather than moveSprite?

I removed this demo, it wasn't being used. basics/video.js is used instead.

themoonrat · 2017-01-25T07:12:50Z

required/examples/demos/text-demo.js

-    stage.addChild(textSample);
-    stage.addChild(spinningText);
-    stage.addChild(countingText);
+    app.stage.addChild(textSample);


addChild these all together

themoonrat · 2017-01-25T07:16:23Z

required/examples/demos/interactivity.js


    // make the button interactive...
    button.interactive = true;
-
-

    button


Do we want to demonstrate pointer events alongside mouse and touch for interactivity guide?

I think it's better and easier to use pointer events because it's covers both. I'm going to comment out the mouse and touch events.

themoonrat · 2017-01-25T07:19:12Z

required/examples/basics/video.js

-// create the root of the scene graph
-var stage = new PIXI.Container();
+var app = new PIXI.Application(800, 600, { transparent: true });
+document.body.appendChild(app.view);

 // create a video texture from a path
 var texture = PIXI.Texture.fromVideo('required/assets/testVideo.mp4');


May want to require a 'play'touch, which goes through baseTexture to call play on html video so that this works on iPhones

How would you do this?

Instead of the texture automatically being created and added to the stage, on initial load this would not be the case; there would just be a 'play' sprite. When this is pressed, it would disappear, and then create the video texture, adding to a sprite, adding to the stage etc.

@themoonrat added click to play for the video example

themoonrat · 2017-01-25T07:23:46Z

There's some things you might not think worth changing, but raised them anyway. There are some common things... Showing addChild with multiple parameters, using pointer events rather than mouse and touch etc. Might be some i missed there, but you might not care so that's fine!

I also added in one place for consideration, but applies to lots of them.... should our demos demonstrate frame rate independence when hooking into the ticker callback for transforms on screen.

bigtimebuddy · 2017-01-25T11:55:00Z

Great review @themoonrat, I don't disagree with any of your comments. Thanks for digging in.

themoonrat

Added a couple of little comments.
Also

demos/blendmodes.js demo background doesn't fill the screen? Looks slightly to the left of where it should be
custom-filter.js demo does not work at all
no demos from spine/ or textures/ work

themoonrat · 2017-01-27T10:51:09Z

required/examples/basics/video.js


-stage.addChild(videoSprite);
+// Listen for a click/tap event to start playing the video
+// this is useful for some mobile platforms


// Listen for a click/tap event to start playing the video
// this is useful for some mobile platforms. For example:
// ios9 and under cannot render videos in PIXI without a polyfill - https://github.com/bfred-it/iphone-inline-video
// ios10 and above require a click/tap event to render videos that contain audio in PIXI. Videos with no audio track do not have this requirement

themoonrat · 2017-01-27T10:52:52Z

required/examples/basics/text.js

+    fontSize: 36,
+    fontStyle: 'italic',
+    fontWeight: 'bold',
+    fill: ['#ffffff', '#fff0b5'], // gradient


Would be nice if the difference in colours was a bit more pronounced. I couldn't tell that one was set

ivanpopelyshev · 2017-01-27T11:23:07Z

demos/blendmodes.js demo background doesn't fill the screen? Looks slightly to the left of where it should be

It was like that in v3.

I'll look at bit later whats it with spine and textures. I know that textures were working but they were a bit wrong, I'll fix it

bigtimebuddy · 2017-01-27T13:32:22Z

@themoonrat Fixed the blendmodes background. Must've missed that.

custom-filter and the spine/texture examples all worked for me. Did you making sure you clear your browser cache? Not sure what could be the issue there.

themoonrat · 2017-01-27T13:44:14Z

I have cleared browser cache (have chrome dev tools open to clear on refresh)

For the custom filter I get the following error

Resource.js:593 GET http://localhost/pe/required/assets/basics/shader.frag 404 (Not Found)
2017-01-27 13:43:07.320 compileProgram.js:56 WebGL: INVALID_VALUE: shaderSource: string not ASCII
compileShader @ compileProgram.js:56
compileProgram @ compileProgram.js:13
Shader @ GLShader.js:31
Shader @ Shader.js:45
applyFilter @ FilterManager.js:225
apply @ Filter.js:108
popFilter @ FilterManager.js:157
renderAdvancedWebGL @ Container.js:460
renderWebGL @ Container.js:386
renderWebGL @ Container.js:395
render @ WebGLRenderer.js:284
render @ Application.js:68
emit @ index.js:150
update @ Ticker.js:320
Ticker._tick @ Ticker.js:128
requestAnimationFrame (async)
_requestIfNeeded @ Ticker.js:152
start @ Ticker.js:257
start @ Application.js:84
onLoaded @ VM2797:28
dispatch @ mini-signals.js:93
_onComplete @ Loader.js:569
(anonymous) @ Loader.js:609
next @ async.js:26
bitmapFontParser @ bitmapFontParser.js:6
(anonymous) @ Loader.js:591
next @ async.js:32
spritesheetParser @ spritesheetParser.js:12
(anonymous) @ Loader.js:591
next @ async.js:32
textureParser @ textureParser.js:24
(anonymous) @ Loader.js:591
next @ async.js:32
blobMiddleware @ blob.js:84
(anonymous) @ Loader.js:591
next @ async.js:32
eachSeries @ async.js:33
_onLoad @ Loader.js:590
dispatch @ mini-signals.js:93
complete @ Resource.js:356
_xhrOnLoad @ Resource.js:782
XMLHttpRequest.send (async)
_loadXhr @ Resource.js:593
load @ Resource.js:454
(anonymous) @ Loader.js:554
next @ async.js:26
eachSeries @ async.js:33
_loadResource @ Loader.js:543
Loader._boundLoadResource @ Loader.js:129
process @ async.js:108
resume @ async.js:137
load @ Loader.js:481
window.onload @ VM2797:14
2017-01-27 13:43:07.321 compileProgram.js:61 ERROR: 0:? : '' : syntax error
Uncaught TypeError: Failed to execute 'attachShader' on 'WebGLRenderingContext': parameter 2 is not of type 'WebGLShader'.
at compileProgram (compileProgram.js:18)
at Shader (GLShader.js:31)
at new Shader (Shader.js:45)
at FilterManager.applyFilter (FilterManager.js:225)
at Filter.apply (Filter.js:108)
at FilterManager.popFilter (FilterManager.js:157)
at Sprite.renderAdvancedWebGL (Container.js:460)
at Sprite.renderWebGL (Container.js:386)
at Container.renderWebGL (Container.js:395)
at WebGLRenderer.render (WebGLRenderer.js:284)

themoonrat · 2017-01-27T13:52:25Z

Ok, ignore; I had to set up a mime type for .frag and .atlas on my webserver. All good now :)

ivanpopelyshev · 2017-01-27T14:03:57Z

@bigtimebuddy same background is used in pictures

Update all examples to use PIXI.Application, remove v3 examples

43c190e

bigtimebuddy requested review from themoonrat and GoodBoyDigital January 23, 2017 20:54

ivanpopelyshev approved these changes Jan 23, 2017

View reviewed changes

Matt Karl added 3 commits January 23, 2017 19:49

Removed un-needed JSON files, fixed render texture size

f9cdb03

More clean-up, standardized braces style, don't use position.(x|y)

d338a16

Use x, y instead of the verbose position object

a40a756

englercj approved these changes Jan 25, 2017

View reviewed changes

themoonrat suggested changes Jan 25, 2017

View reviewed changes

Matt Karl added 4 commits January 25, 2017 08:45

Use pointer events, use single addChild, clean-up

2a8f8db

More clean-up of events, code style

8b85095

Add comment about mouse & touch events

08b0df2

Center more examples relative to stage

2163042

bigtimebuddy mentioned this pull request Jan 25, 2017

Update basic.js #16

Closed

Matt Karl added 2 commits January 25, 2017 14:46

Add play button to video example

0722639

More relative positioning of items

74f9063

themoonrat suggested changes Jan 27, 2017

View reviewed changes

Matt Karl added 4 commits January 27, 2017 08:23

Added more verbose comment about video

4ad23c5

More extreme gradient

cf4acbd

Fixed size of the background

e765a8a

Updated Spine APIs

ad84d7c

Use global SCALE_MODE

830983a

themoonrat approved these changes Jan 27, 2017

View reviewed changes

Fixes issue #14

df24853

bigtimebuddy merged commit 9d3986a into gh-pages Jan 27, 2017

bigtimebuddy deleted the app-v4 branch January 27, 2017 15:11

bigtimebuddy mentioned this pull request Jan 27, 2017

Masking demo looks weird. #14

Closed

ivanpopelyshev mentioned this pull request Jan 27, 2017

We made a wrong move #25

Closed

whitetigle mentioned this pull request Jan 28, 2017

Functional game engine fable-compiler/fable-graphics#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update all examples to use PIXI.Application, remove v3 examples #24

Update all examples to use PIXI.Application, remove v3 examples #24

bigtimebuddy commented Jan 23, 2017 •

edited

Loading

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

bigtimebuddy Jan 25, 2017

themoonrat Jan 25, 2017

themoonrat Jan 25, 2017

bigtimebuddy Jan 25, 2017

themoonrat Jan 25, 2017

bigtimebuddy Jan 25, 2017

themoonrat Jan 25, 2017

bigtimebuddy Jan 25, 2017

themoonrat commented Jan 25, 2017

bigtimebuddy commented Jan 25, 2017

themoonrat left a comment

themoonrat Jan 27, 2017

themoonrat Jan 27, 2017

ivanpopelyshev commented Jan 27, 2017 •

edited

Loading

bigtimebuddy commented Jan 27, 2017

themoonrat commented Jan 27, 2017 •

edited

Loading

themoonrat commented Jan 27, 2017 •

edited

Loading

ivanpopelyshev commented Jan 27, 2017

Update all examples to use PIXI.Application, remove v3 examples #24

Update all examples to use PIXI.Application, remove v3 examples #24

Conversation

bigtimebuddy commented Jan 23, 2017 • edited Loading

Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

themoonrat commented Jan 25, 2017

bigtimebuddy commented Jan 25, 2017

themoonrat left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ivanpopelyshev commented Jan 27, 2017 • edited Loading

bigtimebuddy commented Jan 27, 2017

themoonrat commented Jan 27, 2017 • edited Loading

themoonrat commented Jan 27, 2017 • edited Loading

ivanpopelyshev commented Jan 27, 2017

bigtimebuddy commented Jan 23, 2017 •

edited

Loading

ivanpopelyshev commented Jan 27, 2017 •

edited

Loading

themoonrat commented Jan 27, 2017 •

edited

Loading

themoonrat commented Jan 27, 2017 •

edited

Loading