Sorry this is off topic, but I need help:

I need to get below data into a 3 dimensional JS array
Any help would be appreciated, thanks!

var MapBoard = new Array(5)
	var level;
	for (level = 0; level < 5; level++)
	{
		MapBoard[level] = new Array(28);
			var indexX;
			for (indexX = 0; indexX < 28; indexX++)
			{
				MapBoard[level][indexX] = new Array(28);
			}
	}

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,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,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,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,0,0,
0,0,0,0,0,0,2,1,1,1,1,1,0,0,0,1,1,1,1,1,2,0,0,0,0,0,0,
0,0,0,0,0,0,1,0,0,1,0,1,1,1,1,1,0,1,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,0,0,0,0,0,
0,0,0,0,0,0,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,0,0,
0,0,0,0,0,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,0,1,0,0,1,0,1,1,0,1,1,0,1,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,0,2,1,1,1,1,1,0,0,0,1,1,1,1,1,2,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,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,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,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,0,0,0,0,0,0,0,0;

Thanks!

JeZxLee

I've been porting a game over to PIXI, and have got slightly caught up in what's usually a rather trivial issue.

The problem is essentially the same as dragging, in that I have an initial click position, and then I track the updated x/y. It works fine on desktop, but doesn't work on mobile. I'm guessing this is because pointer positions aren't updated in the same way (or there doesn't appear to be a pointer equivalent of renderer.plugins.interaction.mouse.global;)

Any way I can get around this?

I am trying to use this lib: https://github.com/pixijs/pixi-tilemap

and it seems using shader rather than sprites to render tilemap? is it more efficiency?  why?

the memory usage is the same, right?

thanks.  

I want to run myPixi.ticker.stop() when the window loses focus in any way, eg minimize, click a different tab or even closing the window.

Q: Is there a javascript event that covers all the possibilities?

Q2: Is there a javascript event that covers all possible methods of a window regaining focus, eg a return from minimize, reclicking the tab etc?

Hello, I am developing a game, and in a parte o this I need move and sprite and after some events move many sprites, but using app.tocker.add doesn't work

In a first part I used this code to move a box

appearBoxOrigin() {
    let counter = 0;
    this.app.ticker.add(() => {
      if (counter === 35) {
        counter = 0;
        this.app.ticker.stop();
        this.addInteractiveImagesToOriginBox();
        this.appearBoxHighLow();
      } else {
        this.Boxes.origin.sprite.x -= 10;
        counter += 1;
      }
    });
  }

Afer I used this another code to move another sprite, but code doesn't work, doesn't show error, only doesn't run, I don't know if is because I use stop function to stop the animation. I'd like know How can I use ticker to make animation, how can I start and stop, and really I don't understand how make animations, so I use this counter but making essay and error but I'm not sure.
 

this.app.ticker.add(() => {
      if (counter === 0) this.app.ticker.start();
      if (counter === 35) {
        counter = 0;
        this.app.ticker.stop();
        this.appearLoftSoftBoxes();
      } else {
        this.Boxes.targetHigh.sprite.x -= 10;
        this.Boxes.targetLow.sprite.x -= 10;
        /* this.interactiveImages.map((image, index) => {
          this.interactiveImages[index].setPosition(
            { x: this.interactiveImages[index].x - 1, y: this.interactiveImages[index].y },
          );
          return null;
        }); */
        counter += 1;
      }
      console.log('ticker move images');
    });

But my variable this.interactiveImages (a class) seem like render again and show me an error on the constructor of these variables.

Hello. I want to make Sprite size (width, height) transform independent (constant sprite size). What I mean is whenever I change transformation matrix it should apply for coords, but not the size of the sprite.

I've been looking into sources and found 2 ways to do that, but I don't like neither of them.

1) Different containers: Right now I change main container's (stage) matrix and it applies for all children in it, which is great, but not in my case. I can split objects that I want to be scale size independent into another container and only sync translation, which is a bit odd to me, because I still want the transform for this container (for coords).

2) Not sure if it will work: whenever I change main container's matrix, for every object that I want to make scale independent, change worldTransform (a, d) to 1. But I think it will break the coords.

Is there a good way to achieve this?

Probably a silly question, but how do you import pixi-display in TypeScript? I've fairly new to TypeScript, but this works for Pixi.js. 

import { Application, ApplicationOptions, Container, Graphics, Sprite } from "pixi.js";

But this does not for pixi-display.

import { DisplayGroup } from "pixi-display";

Also is pixi-display the preferred way of sorting or is there another way I should be sorting containers? I basically want to be able to add multiple containers to the view and if you click on one behind another it will come to the front and stay there. 

Hi,

I wanted to publish an engine test on below website, but only the music is working and not PixiJSv4?
http://www.kongregate.com/games/JeZxLee/1993-cobra-5-0-engine-test_preview
(any help would be appreciated, thanks!

JeZxLee

Hi,

Working on the playing game screen now.
How can I change the current background color in JavaScript?
Thanks!

JeZxLee

hi. guys..

i'm wondering ps4 and xbox360 can play with webgl by pixi.js ..

please give me tips
 

thx^^/

 

Hi,

Trying to get 3-D JS arrays working, but am having issues below:

function LoadMaps()
{
var indexX;
var indexY;	
	
	MapBoard[0][0][0] =
	[ //#1 Board/Pellets
	[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,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,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,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,0,0],
	[0,0,0,0,0,0,2,1,1,1,1,1,0,0,0,1,1,1,1,1,2,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,0,0,1,0,1,1,1,1,1,0,1,0,0,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,1,0,0,1,0,1,1,0,1,1,0,1,0,0,1,0,0,0,0,0,0],
	[0,0,0,0,0,0,2,1,1,1,1,1,0,0,0,1,1,1,1,1,2,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,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,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,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,0,0,0,0,0,0,0,0]
	];

	for (indexY = 0; indexY < 28; indexY++)
	{
		for (indexX = 0; indexX < 28; indexX++)
		{
			if (MapBoard[0][indexX][indexY] == 0)  NumberOfLegosOnLevel[0]++;
		}
	}
	// "NumberOfLegosOnLevel[0]" always equals 0?

Any help would be appreciated, thanks!

JeZxLee

Hey all, just wondering if anyone could spare their knowledge on getting started with PIXI.js with Typescript

I've made a couple of simple games now using PIXI.js and love it!  Though really find javascript a pain to use as the games get bigger with all code being in 1 js file.

What I want to start doing is making a library around PIXI.js for common things I will need (e.g. controls, grid layouts, etc) and build it up from there.  Something so simple with UnityC# and even FlashAS3 that I always took for granted!

I understand Typescript maybe the best way to do this, though am a little confused about the difference between all the options (Browserify, Babel, ES6, Typescript etc) what they all actually do what if any of those I will need, and what is the best way forward!

Many thanks for any advice!
 

I know about 'added' and 'removed' events, but they fired only when display object added to parent container. So I was looking for events similar of flash events ADDED_TO_STAGE and REMOVE_FROM_STAGE, and found this topic 

So far, as I understood, in pixi.js there is no way to get event of adding to display list graph, and this is VERY, VERY UNCONVENIENT. Let me explain my situation, I need to apply some logic to display objects when they on stage, and remove this logic when they off. It can be done easily with such types of events, but now I wondering what to do? Implement my own, or there are any other ways?

Hello
help me please
The task is
There are 2 textures, both textures are obtained from the image
It is necessary that an oin from the bottom be a mask for another.
How not tried it does not work out
Example code

Quote

var maskSprite = maskFrame.sprite;
maskSprite.x = maskFrame.offset.x;
maskSprite.y = maskFrame.offset.y;
maskSprite.alpha = .5;
this.stage.addChild(maskSprite);
frame[i].sprite.mask = maskSprite;

this.stage.addChild(frame[i].sprite)

 

Hi,

We are on schedule to release Beta1 on Thursday, August 3rd...

Please help test below Alpha1 version:
http://16bitsoft.com/files/PixiAudio5JS/index.html
(should be stable and source code is clean)

Let us know if you see anything wrong or have suggestions for improvement.
(will be adding the ghosts on Wednesday & level progression is Thursday)
Thanks!

JeZxLee

Hello, I am using pixi-sound on a game with pixi.js and now I can't start my game because I get an error for the fs

ERROR in ./node_modules/pixi-sound/dist/pixi-sound.es.min.js
    Module not found: Error: Can't resolve 'fs' in '/Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/dist'
    resolve 'fs' in '/Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/dist'
      Parsed request is a module
      using description file: /Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/package.json (relative path: ./dist)
        Field 'browser' doesn't contain a valid alias configuration
      after using description file: /Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/package.json (relative path: ./dist)

I installed v2.0.0-alpha so on github told me that this version solve it. Do you know what might be?

Thanks

My issue here is I'm trying to create  a countdown timer using fonts and styling of my choice but I don't know how to update the text variable. I want to call the addChild method once and have the value of that string updated in a function. The only way I can see the updated countdown is with the addChild method but at the moment that leaves duplicate copies of the object on the screen. The render does not clear the canvas even though I read in the documentation it's set to do that by default. I tried two methods to get the desired results:

var countdown = new PIXI.Text( days+" days "+hours+" hours " +minutes+" minutes "+seconds+" seconds ",timerStyle);
    countdown.updateText();
    timerContainer.addChild(countdown)
//tried a second method and that was use to create a sprite from the text
    textSprite = new PIXI.Sprite(countdown.texture);
    timerContainer.addChild(textSprite);

I did some extensive google searching and I learned that you need to use the function .updateText(); in order for the text variable to actually update. I thought this would work but it does nothing to change the string value on the screen. I have also tried to declare and add the countdown  variable to the stage, outside the function but the text does not update. 

Any suggestions would be greatly appreciated. 

Hi,

Can someone tell me how to optimize the following source code?:
I ask because I am doing the new high score name input soon,
and it would have 50+ on-screen character buttons, thanks!

JeZxLee

	if (index == 0)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftZero );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightZero );
	}
	else if (index == 1)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftOne );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightOne );
	}
	else if (index == 2)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftTwo );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightTwo );
	}
	else if (index == 3)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftThree );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightThree );
	}
	else if (index == 4)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftFour );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightFour );
	}
	else if (index == 5)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftFive );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightFive );
	}
	else if (index == 6)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftSix );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightSix );
	}

function onClickArrowLeftZero()
{
	if (ArrowLeft[0].scale.x < 1 && ArrowLeft[0].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 0;
	
	ArrowLeft[0].scale.x *= .80;
	ArrowLeft[0].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightZero()
{
	if (ArrowRight[0].scale.x < 1 && ArrowRight[0].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 0;
	
	ArrowRight[0].scale.x *= .80;
	ArrowRight[0].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftOne()
{
	if (ArrowLeft[1].scale.x < 1 && ArrowLeft[1].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 1;
	
	ArrowLeft[1].scale.x *= .80;
	ArrowLeft[1].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightOne()
{
	if (ArrowRight[1].scale.x < 1 && ArrowRight[1].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 1;
	
	ArrowRight[1].scale.x *= .80;
	ArrowRight[1].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftTwo()
{
	if (ArrowLeft[2].scale.x < 1 && ArrowLeft[2].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 2;
	
	ArrowLeft[2].scale.x *= .80;
	ArrowLeft[2].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightTwo()
{
	if (ArrowRight[2].scale.x < 1 && ArrowRight[2].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 2;
	
	ArrowRight[2].scale.x *= .80;
	ArrowRight[2].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftThree()
{
	if (ArrowLeft[3].scale.x < 1 && ArrowLeft[3].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 3;
	
	ArrowLeft[3].scale.x *= .80;
	ArrowLeft[3].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightThree()
{
	if (ArrowRight[3].scale.x < 1 && ArrowRight[3].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 3;
	
	ArrowRight[3].scale.x *= .80;
	ArrowRight[3].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftFour()
{
	if (ArrowLeft[4].scale.x < 1 && ArrowLeft[4].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 4;
	
	ArrowLeft[4].scale.x *= .80;
	ArrowLeft[4].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightFour()
{
	if (ArrowRight[4].scale.x < 1 && ArrowRight[4].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 4;
	
	ArrowRight[4].scale.x *= .80;
	ArrowRight[4].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftFive()
{
	if (ArrowLeft[5].scale.x < 1 && ArrowLeft[5].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 5;
	
	ArrowLeft[5].scale.x *= .80;
	ArrowLeft[5].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightFive()
{
	if (ArrowRight[5].scale.x < 1 && ArrowRight[5].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 5;
	
	ArrowRight[5].scale.x *= .80;
	ArrowRight[5].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftSix()
{
	if (ArrowLeft[6].scale.x < 1 && ArrowLeft[6].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 6;
	
	ArrowLeft[6].scale.x *= .80;
	ArrowLeft[6].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightSix()
{
	if (ArrowRight[6].scale.x < 1 && ArrowRight[6].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 6;
	
	ArrowRight[6].scale.x *= .80;
	ArrowRight[6].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

I'd like to apply a perspective transform to my pixi container so I can replicate the effect in here: 

http://jsfiddle.net/q9344/

I know there's now a skew transform, but the perspective transform seems different because the sides of the trapezoid are not parallel in this case. Appreciate any help. Thanks!

When trying to move an object with high speed across the scene, I've noticed that the movement is not really smooth - there are some small
but really annoying glitches. I've tried both manual moving and moving with TweenLite, the glitches persist in both cases. 

I'm using  Pixi.js 4.5.3 

This is how I create the Render,  maybe something wrong with it:

let canvas = <HTMLCanvasElement>document.getElementById("canvas");
this.renderer = PIXI.autoDetectRenderer(1500, 1200, {
    // ScenesManager.renderer = new PIXI.CanvasRenderer(800, 600, {
    view: canvas,
    antialias: false,
    roundPixels: false,
});
this.renderer.backgroundColor = 0x000000;
document.body.appendChild(this.renderer.view);

And this is my tween:

let wall:PIXI.Sprite = PIXI.Sprite.fromFrame("1.png");
this.addChild(wall);
wall.position = new PIXI.Point(4*64, 2*64);
TweenLite.to(wall.position, 15, {
    x: 99*64, y: 2*64, ease: Linear.easeNone});

And I also made the demo (see the attachment)

I would really appreciate any help or ideas on what can cause such microlags, cause I've spent many hours trying to sort this out. 

The number of objects on scene doesn’t really matter, there are lags even on small test scene with just 1 moving object.

 Any thoughts on what's happening?

TestTween.zip