EzDevInfo.com

pixi.js: how is the scrolling done on the website flashvhtml.com?

How's the page scrolling created on flashvhtml.com? How is the scrolling triggered by the links at the top and how the other 'sub animation' events tied in to the scrolling background?

Offset grouped animations

I have a group of sprites that are all the same in a loop. What would be the best way to offset each animation frame, so they all don't animate at the same frame.

Pixi.js: How is this complex series of position/alpha/scale numbers generated?

Can anyone explain how this file was generated, what is was made with? It's a huge amount of y position, alpha and scale points, one for each frame, for animating sprites on the pixi canvas. Some elements have maybe 800 position points? I'm thinking each y point was not typed individually, but maybe it was :) Seems like it would have been tough to refine the animation if each number was typed rather than generated some other way.

http://flashvhtml.com/js/site/ScrollMap.js

For instance:

var rockets = {rockets:[{startFrame:0, endFrame:100, position:[1.15,5,3.14,2.25,10,3.14,3.3,15,3.14,4.3,20,3.14,5.3,25,3.14,6.25,30,3.13,7.15,35,3.13,8.05,40,3.13,8.9,45,3.13,9.75,50,3.13,10.55,53,3.13,11.35,54,3.13,12.15,53,3.13,12.9,50,3.13,13.65,45,3.13,14.4,38,3.13,15.1,29,3.13,15.8,18,3.13,16.5,5,3.13,17.2,-9.95,3.13,17.85,-26.9,3.13,18.5,-45.85,3.13,19.15,-66.8,3.13,19.8,-89.75,3.13,20.45,-114.7,3.13,21.05,-141.65,3.13,21.65,-170.6,3.13,22.25,-201.55,3.13,22.85,-234.5,3.13,23.45,-269.45,3.13,24.05,-306.4,3.13,24.6,-345.35,3.13,25.15,-386.3,3.13,25.7,-429.25,3.13,26.25,-474.2,3.13,26.8,-521.15,3.13,27.35,-570.1,3.13,27.9,-621.05,3.13,28.45,-674,3.13,29,-728.95,3.13,29.55,-785.9,3.13,30.05,-844.85,3.13,30.55,-905.8,3.13,31.05,-968.75,3.13,31.55,-1033.7,3.13,32.05,-1100.65,3.13,32.55,-1169.6,3.13,33.05,-1240.55,3.13,33.55,-1313.5,3.13,34.05,-1388.45,3.13,34.55,-1465.4,3.13,35.05,-1544.35,3.13,35.55,-1625.3,3.13,36.05,-1708.25,3.13,36.55,-1793.2,3.13,37.05,-1880.15,3.13,37.55,-1969.1,3.13,38.05,-2060.05,3.13,38.55,-2153,3.13,39.05,-2247.95,3.13,39.55,-2344.9,3.13,40.05,-2443.85,3.13,40.55,-2544.8,3.13,41,-2647.75,3.13,41.45,-2752.7,3.13,41.9,-2859.65,3.13,42.35,-2968.6,3.13,42.8,-3079.55,3.13,43.25,-3192.5,3.13,43.7,-3307.45,3.13,44.15,-3424.4,3.13,44.6,-3543.35,3.13,45.05,-3664.3,3.13,45.5,-3787.25,3.13,45.95,-3912.2,3.13,46.4,-4039.15,3.13,46.85,-4168.1,3.13,47.3,-4299.05,3.13,47.75,-4432,3.13,48.2,-4566.95,3.13,48.65,-4703.9,3.13,49.1,-4842.85,3.13,49.55,-4983.8,3.13,50,-5126.75,3.13,50.45,-5271.7,3.13,50.9,-5418.65,3.13,51.35,-5567.6,3.13,51.8,-5718.55,3.13,52.25,-5871.5,3.13,52.7,-6026.45,3.13,53.15,-6183.4,3.13,53.6,-6342.35,3.13,54.05,-6503.3,3.13,54.5,-6666.25,3.13,54.95,-6831.2,3.13,55.4,-6998.15,3.13,55.85,-7167.1,3.13,56.3,-7338.05,3.13,56.75,-7511,3.13,57.2,-7685.95,3.13]},

and also the position, scale and alpha here:

    mc89:{view:'cloudFade', depth:3, startFrame:488, endFrame:540, position:[1,1,0.95,1.2,0.95,1.2,0.95,1.2,1,1,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], scale:[20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375], alpha:[0,0.25,0.5,0.75,1,0.875,0.75,0.625,0.5,0.375,0.25,0.125,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}, 

It kind of looks like skrollr.js meets greensock on steroids. It's from the brilliant http://flashvhtml.com site. Anyhow, I'd like to know how it was put together.

Pixi.js and ThreeJS for an advanced web GUI

The idea

Hi! I and a team of developers are creating an open-source graphical interface for interactive graph editing.

I want this interface to handle a big amount of connected nodes, allowing the user to move them, reconnect, zoom in/out etc. Each node could have text, buttons, sliders and other controls on top of it. Additional we want to create a pretty advanced, pluggable graphical interface - each panel would be a plugin - you can think of it like about web based eclipse. A panel could be te graph editor, a timeline or a 3D viewport.

The question

I would like to ask you, which library would give us more benefits - Pixi.js, ThreeJS or maybe other one? Maybe we should mix them - creating the interface in Pixi.js and some of the plugins that need 3D support in ThreeJS (I don't personally like this idea, because of lower "consistency").

Requirements

We want everything running in WebGL. A reason for that is, that we want to run the graph editor as smoothly as possible and considering the fact, that the graph editor needs to display the same controls that other parts of the GUI, it is reasonably to do it in one technology.

I'm looking for a library, that would give me the best performance and flexibility in creating such a big project, especially considering:

• ability to create custom HUD elements (sliders, buttons, graphs, etc)
• ability to handle big amount of elements - a caching / redrawing only needed part is important
• canvas fallback is important, but not crucial

PixiJS Multiple Stages?

I'm using PIXI.JS and trying to have the user advance to a second level once they finish the first. I'm going to be receiving students GAME.init functions (that adds all their platforms) and I would like to render the next stage after they complete the current stage. I have come across only DisplayObjectContainer that looks promising. Can anyone help me out/ give any hints?

Converting 2D engine to Pixi.js

I've got a 2D particle engine I've worked on for a while that I want to convert to pixi.js for performance reasons. Only issue is, I have no clue how I will go about doing it because it looks like pixi.js requires you to use images? Right now I'm just using fillRect and the area I want to fill - and I wish to keep doing that.

Right now I have a main loop that updates/draws particles every animation frame. And I animate the particle in the prototype.draw function. Is there any way to do this in Pixi.js?

My current engine

   // Define Apparatus Variables.
    var cw = window.innerWidth,
        ch = window.innerHeight,
        blackhole_entities = {},
        blackhole_entitiesIndex = 0,
        blackhole_entitieAmount = 12000, //6000
        blackhole_button = $('.blackhole'),
        canvas = $('<canvas/>').attr({
            width: cw,
            height: ch,
            id: "apparatus"
        }).appendTo('body'),
        context = canvas.get(0).getContext("2d");

    var requestframe = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        // IE Fallback, you can even fallback to onscroll
        function(callback) {
            window.setTimeout(callback, 1000 / 60)
        };

    // Default Entity "Class"
    apparatus.blackhole = function(orbit) {
        blackhole_entitiesIndex++;
        this.id = blackhole_entitiesIndex;
        blackhole_entities[blackhole_entitiesIndex] = this;

        this.width = .5;
        this.height = .5;
        this.orbit = orbit;

        this.velocity = Math.floor((Math.random() * 3200) + 2500);

        this.angle = (Math.PI * 2 / this.width) * Math.floor((Math.random() * cw*4) + 10);;
        var choice = Math.random() * 5;

        var rands = [];
        rands.push(Math.random() * 100 + 1);
        rands.push(Math.random() * 10 + 241);

        var choice2 = Math.random() * 4;

        var rands2 = [];
        rands2.push(Math.random() * 100 + 1);
        rands2.push(Math.random() * 180 + 211);

        this.distance = (rands.reduce(function(p, c) {
            return p + c;
        }, 0) / rands.length);

        this.distance2 = (rands2.reduce(function(p, c) {
            return p + c;
        }, 0) / rands2.length);
        this.increase = Math.PI * 2 / this.width;

        this.distancefix = this.distance;
        this.distance2fix = this.distance2;

        this.color = "255,255,255";
        this.alpha = 0.6

        this.bx = Math.random() * 20 + 1;
        this.by = Math.random() * 20 + 1;
        this.inplace = true;
    }

    apparatus.blackhole.prototype.draw = function() {
        if (this.orbit >= 2) {
            this.x = this.bx + this.distance * Math.cos(this.angle / this.velocity) + cw / 2;
            this.y = this.by + this.distance * Math.sin(this.angle / this.velocity) + ch / 2;
            this.alpha = 0.6;
        } else {
            this.x = this.bx + this.distance2 * Math.cos(this.angle / this.velocity) + cw / 2;
            this.y = this.by + this.distance2 * Math.sin(this.angle / this.velocity) + ch / 2;
            this.alpha = 0.4;
        }/*
        if (blackhole_button.hasClass('open_blackhole')) {
          blackhole_button.removeClass('close_blackhole');

            if (this.distance >= 171) {
                this.distance = this.distance - 4;
            } else if (this.distance <= 161) {
                this.distance= this.distance + 8;
            }

            if (this.distance2 >= 201) {
                this.distance2 = this.distance2 - 6;
            } else if (this.distance2 <= 161) {
                this.distance2 = this.distance2 + 6;
            }
        }
        if(blackhole_button.hasClass('close_blackhole')){
            if (this.distance >= this.distancefix + 4) {
                this.distance = this.distance - 4;
            } else if (this.distance <= this.distancefix - 5) {
                this.distance= this.distance + 5;
            }

            if (this.distance2 >= this.distance2fix + 10) {
                this.distance2 = this.distance2 - 4;
            } else if (this.distance2 <= this.distance2fix - 10) {
                this.distance2 = this.distance2 + 4;
            }

        }*/

        this.angle += this.increase;

        context.fillStyle = "rgba(" + this.color + "," + this.alpha + ")";
        context.fillRect(this.x, this.y, this.width, this.height);
    }

    apparatus.start = function() {
        apparatus('true');
    }

    apparatus.stop = function() {
        apparatus('false');
    }

    for (var i = 0; i < blackhole_entitieAmount; i++) {
        new apparatus.blackhole((Math.random() * 5));
    }

    var mode;
    apparatus.spawn_blackhole = function(){
      for (i in blackhole_entities) {
        blackhole_entities[i].draw();
      }
    }
    function apparatus(mode) {
        if (mode == 'true') {
            var i;
            requestframe(function() {
                context.clearRect(0, 0, cw, ch);

                apparatus.spawn_blackhole(); 

                apparatus('true');
            });
        }
    }

    apparatus.start();

Will converting to Pixi.js give me extra performance? Right now I'm limited to a smaller amount of particles due to how I have it set up. Any help is much appreciated!

Pixi.js images jump when dragged

I am having trouble with pixi.js I am creating a page like http://www.wolverineunleashed.com/#muscles I have created a big stage which the user can use their drag their way around, it all works fine apart from when the user is dragging, the images shake on the screen, I am thinking that it might be a rendering issue? But at the moment I am pulling my hair out so any help would be most grateful. The code I have is:

var w = window.innerWidth;
var h = window.innerHeight;
var images = [];
var stage = new PIXI.Container();
var renderer = new PIXI.autoDetectRenderer(w, h,{transparent:true},true);
document.body.appendChild(renderer.view);

var background = new PIXI.Container();
background.parent = background;
background.interactive = true;

background.on('mousedown', onDragStart)
        .on('touchstart', onDragStart)
        .on('mouseup', onDragEnd)
        .on('mouseupoutside', onDragEnd)
        .on('touchend', onDragEnd)
        .on('touchendoutside', onDragEnd)
        .on('mousemove', onDragMove)
        .on('touchmove', onDragMove);

loadImages();

requestAnimationFrame(animate);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(background);
}

function onDragStart(event)
{
    this.data = event.data;
    this.mousePressPoint = [];
    this.dragging = true;
    this.mousePressPoint[0] = this.data.getLocalPosition(this.parent).x - this.position.x;
    this.mousePressPoint[1] = this.data.getLocalPosition(this.parent).y - this.position.y;
}

function onDragEnd()
{
    this.dragging = false;
    this.data = null;
}

function onDragMove()
{
    if (this.dragging)
    {
        var position = this.data.getLocalPosition(this.parent);
        this.position.x = parseInt(position.x - this.mousePressPoint[0]);
        this.position.y = parseInt(position.y - this.mousePressPoint[1]);
    }
}

Pixi js mouse events for top most sprite only

I noticed that in pixi.js version 1.3, as seen in this example, stacking sprites, then click and drag only drags the top most sprite.

    bunny.mousedown = bunny.touchstart = function(data)
    {
//      data.originalEvent.preventDefault()
        // store a refference to the data
        // The reason for this is because of multitouch
        // we want to track the movement of this particular touch
        this.data = data;
        this.alpha = 0.9;
        this.dragging = true;
        this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
        this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;
    };

http://jsfiddle.net/dirkk0/cXfpq/

In version 3.0.3, as seen in this example, the same code causes all the sprites under the mouse to be dragged.

http://jsfiddle.net/9tnaa31z/5/

Is there a way to get only the top most sprite or a way to get a list of all the sprites (in the order rendered)?

How to change the keys between two images in Phaser?

I'm creating a game.

There is a profile. The user has an opportunity to change the place of elements with each other.

When the user does that, the keys of images must be changed between each other too.

And here is the problem: I can't do that at all

Here is the code I'm trying to use:

var loader = new Phaser.Loader(game);
loader.image(draggableElement.key, 'path to lying element', true);
loader.image(lyingElement.key, 'path to dragged element', true);
loader.onLoadComplete.add(doSmthq);
loader.start();

there is an error

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Thank you in advance! I will really appreciate that =)

Pixi.js: Is there a way to analyze javascript as it's running without writing lots of console.logs?

I'm trying to analyze and understand a huge bunch of js code, it's written in pixi.js. Is there a way to watch the code as it fires? To see the functions as they fire? I tried working with Profiles in Chrome Developer Tools but it just told me about the cookies :D Maybe I'm not using it correctly.

Or is there a way to write a console.log that logs the js function firing, and then I can just keep changing the function name?

How to remove pixi.js banner from the console?

After seeing it for 1000 times it gets annoying so I'd like to have option to remove it.

Somebody online answered that setting

PIXI.dontSayHello = true;

will solve the problem in older versions of PIXI, but in version 3.0.3 it didn't work. Searching for "dontSayHello" in the source code didn't render any results.

Unable to use library functions using unhosted javascript libraries

I am trying to run Example 01 of pixijs (you have to scroll all the way down): http://www.pixijs.com/examples/

When I run it with my local copy of pixi.js all I get is a black square. But when I run it with the web copy of pixi.js it only renders the stage. I think it might have to do with the location of the files? Either way I have all the files in the same folder, so to my knowledge it should work.

Html:

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
    <!-- it will not run if i use the local file -->
    <!-- <script src="/pixi.js"> -->
    <script src="http://www.goodboydigital.com/pixijs/examples/1/pixi.js"></script> 
    <script src="test.js"></script>
</body>
</html>

The contents of test.js are so:

// create an new instance of a pixi stage
var stage = new PIXI.Stage("0x66FF99");

// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(400, 400);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

function animate() {
    requestAnimFrame( animate );

    // just for fun, lets rotate mr rabbit a little
    bunny.rotation += 0.1;

    // render the stage
    renderer.render(stage);
}

Please help.

pixi.js + typescript + es6 why can't I extend the class?

Использую связку pixi.js + машинопись + es6 + system.js

import Test from './test';

export class Main {
    constructor() {
        console.log('typescript main ');
        new Test();
    }
}

import PIXI from 'pixi.js';

export default class Test extends PIXI.Sprite{
    constructor(){
        super();
    }
}

typescript main test.js:4 Uncaught (in promise) TypeError: Cannot read property 'prototype' of undefined at new __extends (http://localhost:8080/javascripts/test.js:4:21) at new Main (http://localhost:8080/javascripts/main.js:13:21) at http://localhost:8080/javascripts/systemfile.js:18:16

How can I fix this error?

p.s.
It is worth noting that pixi.js.d.ts does not fit es6.
I had to change one line. Was -

declare module 'pixi.js' {
    export = PIXI;
}

Changed to -

declare module 'pixi.js' {
    export default PIXI;
}  

Maybe something else needs to change?

UPD: 0.0.1

If you return everything as it was -

declare module 'pixi.js' {
    export = PIXI;
}

And write -

import * as PIXI from 'pixi.js';

then you get the error -

error TS1192: Module "pixi.js" has no default export.

Pixi js how to render svg

I'm trying to make a game using svg images for scalability and for procedurally making physical objects from them.(see matter.js for how)

The problem I'm having is if I load 2 different svg textures and then render them, the second has the render has the fists layered underneith it.

This doesnt happen with raster images and doesnt happen with the canvas options, only webgl.

Is there a way to stop this or am I doing the svgs wrong?

var renderer = PIXI.autoDetectRenderer(
    window.innerWidth, 
    window.innerHeight, 
    {
        backgroundColor : 0x000000,
        resolution:2
    }
);

// add viewport and fix resolution doubling
document.body.appendChild(renderer.view);
renderer.view.style.width = "100%";
renderer.view.style.height = "100%";

var stage = new PIXI.Container();

//load gear svg
var texture = PIXI.Texture.fromImage('image/svg/gear.svg');
var gear = new PIXI.Sprite(texture);

//position and scale
gear.scale = {x:0.3,y:0.3};
gear.position = {x:window.innerWidth / 2,y:window.innerHeight / 2};
gear.anchor = {x:0.5,y:0.5};

//load heart svg
var texture2 = PIXI.Texture.fromImage('image/svg/heart.svg');
var heart = new PIXI.Sprite(texture2);

//position and scale
heart.scale = {x:0.3,y:0.3};
heart.position = {x:window.innerWidth/4,y:window.innerHeight / 2};
heart.anchor = {x:0.5,y:0.5};

//add to stage
stage.addChild(gear);
stage.addChild(heart);

// start animating
animate();
function animate() {

    //gear.rotation += 0.05;

    // render the container
    renderer.render(stage);
    requestAnimationFrame(animate);

}

How to erase a circle? [duplicate]

I would like to erase a circle from an area in the canvas.

I see the clearRect() function, but obviously there's no clearCircle() function, so how should I proceed?

Exactly what I'm trying to do is:

• Draw a black rectangle
• Cut a circular hole in the middle

var context = document.getElementById('canvas').getContext('2d');
context.fillStyle = 0;
context.fillRect(0, 0, 150, 150);

// Now cut a circle in the middle...

<canvas id="canvas" width="150" height="150">