shadowstep33 / angular2pixi Goto Github PK

Primarily can be seen in money on HUD in DJ or in efficiency text. The old text remains :/

Hi, I'm trying to use your package, but I got an error when ng serve:

Module build failed: Error: /path/to/app/node_modules/angular2pixi/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

It asks me to open an issue, so do I.

• @angular-devkit/core: 0.0.28
• @angular/cli: 1.6.3
• @angular/common: 5.2.3
• @angular/compiler-cli: 5.1.2
• @angular/core: 5.2.3

When the window resizes, each component should attempt to erase and redraw itself probably. Might want to play with the container sizing/scaling to try and accomodate everything but likely this wont work well for all cases

Hi,

I imported your module on a test project like:
Import { PixiModule } from 'angular2pixi';

and I get this error:

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference
to an exported function, resolving symbol NgModule

Can you help?

After creating the sprite component, I think scene makes much more sense as a component than service. This way other scenes can extend it and get access to all the functionality and member variables without having to inject.

There are a lot of bloating console logs that can and should be removed

There are some baked in transforms on sprites that can be removed and replaced by directives.

This may require standardization of the naming convention of each main sprite obj and container of display object components.

myComponent.ts

export class myComponent {
    homeScene: any;
    constructor(){}
    homeSceneReady(scene: any){
        console.log("scene:"+ scene);
        this.homeScene = scene;
    }
}

myComponent.html

<renderer #renderer [width]="w" [height]="h">
	<home-scene
			[renderer]="renderer"
			(stageUpdated)="homeSceneReady($event)">
		<sprite
				[x]="w * 0.5"
				[y]="h * 0.6"
				imgUrl="./assets/img/background.jpg"
				*ngIf="homeScene"
				scale="1"
				[container]="homeScene.layers.hud"
		></sprite>
	</home-scene>
</renderer>

I dont get the console log for scene, i cant see my image for the sprite
and it complains about the home-scene tags not existing

help appreciated

I imported the pixi module
I get this error when trying run the module.. on the line that says
export * from './pixi.module'; in index.ts

angular version: 4.4.6 (was unable and reluctant to downgrade to 4.1.3)
npm : 5.5.1
node: 8.6
typescript 2.5.3
electron 1.78

let menuWidth = this.menuContainer.getBounds().width - this.w * 0.6;
let menuHeight = this.menuContainer.getBounds().height;

Should remove the interaction of this.w as it should be more agnostic of the implementation/not hardcoded when it comes to sizing details.

This actually causes a bug on devices with higher pixelRatio

for anyone who is still interested in this project, I'd like your feedback on improving the design pattern. I want effects (filters, transforms, etc.) to be more extensible and programmatic. For one, I would like to make the SpriteComponent an EventEmitter so that it can be manipulated by external sources.

Secondly, I'd like to make the effects suchs as filters and transformations so they can be more plug-n-play and inline with angular. For example:

<sprite
bounceIn
imgUrl="x"></sprite>

"Important! +v0.3.x comes with breaking changes including the removal of SceneComponent and RendererComponent to simplify the process. The docs will be updated accordingly"

please explain the new architecture... the current codebase still uses SceneComponent and RendererComponent

SO! It's me again!

I've managed to get something working! But I still can't build it in prod env, using ng build --prod:

ERROR in : Unexpected value 'PixiModule in .../app/node_modules/angular2pixi/dist/types/pixi.module.d.ts' imported by the module 'AppModule in .../app/app.module.ts'. Please add a @NgModule annotation.

Here is a sample of my app.module.ts:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { PixiModule } from 'angular2pixi';
import { routing } from './app.routes';

@NgModule({
	declarations: [
        /* ... */
	],
	imports: [
		BrowserModule,
		HttpClientModule,
        /* ... */
		routing,
		PixiModule,
	],
    /* ... */
})
export class AppModule {}

And here is my tsconfig.json

{
	"compilerOptions": {
		"outDir": "./dist/out-tsc",
		"sourceMap": true,
		"declaration": false,
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"noImplicitAny": true,
		"strict": true,
        "skipLibCheck": true,
		"target": "es6",
		"typeRoots": [
			"node_modules/@types"
		],
		"types": [ "node" ],
		"lib": [
			"es2017",
			"dom"
		],
		"watch": true
	},
	"compileOnSave": false,
	"angularCompilerOptions": {
		"strictMetadataEmit" : true
    }
}

Well, that's at least much better than before 😄 but do you know how to finally build my app?

unable to get the package working from node_modules ... i put the pixi.module and related components, directives into my src directory where it works fine with the example code, except that i now get this error
Error: This browser does not support webGL. Try using the canvas renderer

stacktrace:
at Object.createContext (/Users/thomas/myapp/node_modules/pixi-gl-core/src/createContext.js:20)
at new WebGLRenderer (/Users/thomas/myapp/node_modules/pixi.js/lib/core/renderers/webGL/webGLRenderer.js:210)
at PixiService.init (pixi.service.ts:106)
at RendererComponent.ngOnInit (renderer.component.ts:38)

some people on linux and mac (like myself) have had their graphics cards blacklisted for webGL
electron/electron#8217

i looked at the pixi.service.ts/js code in the angular2pixi package and change the line:
this.renderer = new PIXI.WebGLRenderer(w, h, { transparent: true, autoResize: false, resolution: 1, view: el });
to
this.renderer = new PIXI.CanvasRenderer(w, h, { transparent: true, autoResize: false, resolution: 1, view: el });

a nice fix would be to add some logic that checks if webgl is supported and if not calls CanvasRenderer instead

Could just add the text-component element to the template for sprite component with all the necessary attributes for customization this would help standardize text between buttons, sprites, etc.

The scaling is OK for now, but when you touchend (from the element) it goes back to original size. If you touchendoutside it stays the correct scaling.

This is possibly a bug that has to do with the custom interaction coded from our app but if that is the case it may be something worth making configurable or handling to some degree in a2p

If you pass a number to [text] it will mess up because no fn trim

Some little problems like that are present in the codebase. Not blaming in any way, but should be fixed. Working on it already

Hi, I'm just playing around with your module, looks good!, I have a problem when trying to do a AoT build with your module included.

ERROR in : Unexpected value 'PixiModule in /Users/MYAPP/node_modules/angular2pixi/dist/types/index.d.ts' imported by the module 'AppModule in /Users/MYAPP/src/app/app.module.ts'. Please add a @NgModule annotation.

I think it's really important to specify explicitly the barrel file, in order to have metadata set correctly.

Have a great day,
Arthur

Hey, I seem to be having a problem with running an animation.

I have to say that I am a beginner with PIXI JS, so here goes nothing:

There's three comments below: // @Shadowstep33 - Using the setInterval, the scene is drawn, and that particular layer rotates and the following lines as well.

My problem is that I want to animate those layers and I can't seem to do that, I saw that in your Sprite components you use GreenSock's animation which is a interaction based animation, I need to do something continuous and be able to speed up or whatnot, I thought of requestAnimationFrame, I didn't try yet to do something continuous with GSAP.

I've been at this many hours and I might be tired, what am I missing to have the scene rendered while requestAnimationFrame is running ? - Or do you have other ideas ?

Thanks in advance! I apologize if it's a PIXI JS subtle detail I'm missing.

Code below:

import {
  Component,
  ElementRef,
  Input,
  Output,
  ViewChild,
  HostListener,
  EventEmitter, OnInit, NgZone
} from '@angular/core';

import * as PIXI from 'pixi.js';

import { SceneComponent, RendererComponent, AssetService, PixiService } from 'angular2pixi';

@Component({
  selector: 'dial-scene',
  template: `
    <!--<sprite
      [x]="0"
      [y]="0"
      scale="1"
      [imgUrl]="tipe"
      [container]="layers.background"
    ></sprite>-->
  `
})

// export class DialSceneComponent extends SceneComponent implements OnInit {
export class DialSceneComponent implements OnInit {
  // The renderer to use
  @Input() public renderer: RendererComponent;

  // Emitter for notifying the outside world when everything is set up
  // and passing a reference to 'this'
  @Output() public stageUpdated = new EventEmitter();

  public scale: number = 1;
  public scaleFactor: number = 1.1;

  public tipe = 'assets/img/tipe.png';
  public dial = 'assets/svg/rotatingdial.svg';
  public dial0 = 'assets/svg/layers/0_background_1200.svg';
  public dial1 = 'assets/svg/layers/1_inner_rim_563.svg';
  public dial2 = 'assets/svg/layers/2_inner_gears_619.svg';
  public dial3 = 'assets/svg/layers/3_curved_rim_654.svg';
  public dial4 = 'assets/svg/layers/4_inner_gears_758.svg';
  public dial5 = 'assets/svg/layers/5_middle_gears_771.svg';
  public dial6 = 'assets/svg/layers/6_Middle_grinding_inner_849.svg';
  public dial7 = 'assets/svg/layers/7_Middle_grinding_outer_920.svg';
  public dial8 = 'assets/svg/layers/8_almost_outer_gears_970.svg';
  public dial9 = 'assets/svg/layers/9_almost_outer_gears_1005.svg';
  public dial10 = 'assets/svg/layers/10_curved_rim_1041.svg';
  public dial11 = 'assets/svg/layers/11_outer_gears_1080.svg';
  public dial12 = 'assets/svg/layers/12_outer_rim_1200.svg';

  // Central container for layers
  public mainStage: PIXI.Container = new PIXI.Container();

  public dials: any = {};
  public dialsLoaded: boolean = false;
  public layers: any = {
    background: new PIXI.Container()
  };

  public moveHandlers = {};  // Functions to execute on move
  public clickHandlers = {};  // Functions to execute on click

  constructor(
    asset: AssetService,
    pixie: PixiService,
    public ngZone: NgZone
  ) {
    // super();
    console.log('asset', asset);
    console.log('pixie', pixie);
  }

  public ngOnInit() {

    this.initLayers();
    this.initBackground();

    this.init();

    this.renderer.pixi.worldStage.addChild(this.mainStage);

    // Output context to scene to any components listening
    this.stageUpdated.emit(this);
  }

  public initLayers() {
    this.layers.background = new PIXI.Container();
    this.renderer.pixi.worldStage.addChild(this.layers.background);
  }

  public initBackground() {

    console.log('renderer', this.renderer);

    const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use.

    // loader.add('rotatingdial', this.dial);

    let i = 0;
    while (i <= 12) {
      loader.add('rotatingdial' + i, this['dial' + i]);
      i++;
    }

    loader.load((loaderx, resources) => {
      let j = 0;
      while (j <= 12) {
        this.dials['ldial' + j] = (new PIXI.Sprite(resources['rotatingdial' + j].texture));
        this.dials['ldial' + j].position.x = this.renderer.width / 2;
        this.dials['ldial' + j].position.y = this.renderer.height / 2;

        this.dials['ldial' + j].pivot.x = this.dials['ldial' + j].width / 2;
        this.dials['ldial' + j].pivot.y = this.dials['ldial' + j].height / 2;

        this.layers.background.addChild(this.dials['ldial' + j]);
        j++;
      }

      this.dialsLoaded = true;
    });
  }

  public init(layers?: any): void {
    // I'm just moving one of my layers below
    let runAnimation = () => {
      if (this.dialsLoaded) {
        // console.log('this.dialsLoaded', this.dials);
        this.dials.ldial3.rotation += 0.05;
        // this.renderer.pixi.renderer.render(this.layers.background);
        this.renderer.pixi.renderer.render(this.mainStage);
      }
    };

    // @Shadowstep33 - Using the setInterval, the scene is drawn, and that particular layer rotates 
    setInterval(() => {
      runAnimation();
    }, 500);

    // @Shadowstep33 - Using requestAnimationFrame, even timed out (with a timeout the scene renders once, then when init starts it disappears) the scene is blank, the requestAnimation frame is running
    animate();
    function animate() {
      requestAnimationFrame(animate);
      runAnimation();
    }

    // @Shadowstep33 - Using requestAnimationFrame outside Zone yields the same results
    this.ngZone.runOutsideAngular(() => requestAnimationFrame(() => {
      this.playAnimation();
    }));

  }

  public playAnimation() {
    if (this.dialsLoaded) {
      this.dials.ldial3.rotation += 0.05;
      // this.renderer.pixi.renderer.render(this.layers.background);
      this.renderer.pixi.renderer.render(this.mainStage);
    }

    requestAnimationFrame(() => {
      this.playAnimation();
    });
  }

  /*public fadeInScene(): Promise<{}> {
      console.log('mumu');
  }
  public fadeOutScene(): Promise<{}> {
    console.log('mumu');
  }*/
  public blurScene(scene: any): void {
    console.log('mumu');
  }
  public registerHandler(eventStr: any, id: any, fn: any): void {
    console.log('mumu');
  }
  public deregisterHandler(eventStr: any, id: any): void {
    console.log('mumu');
  }
  public stageClick(data: any): void {
    console.log('mumu');
  }
  public wipe(): void {
    console.log('mumu');
  }
  public unload(): void {
    console.log('mumu');
  }

}

also the parent html file

<renderer #_r [width]="w" [height]="h">
  <dial-scene
    [renderer]="_r"
    (stageUpdated)="homeSceneReady($event)">

    <!--<sprite
      [x]="w * 0.5"
      [y]="h * 0.6"
      imgUrl="assets/img/tipe.png"
      *ngIf="dialScene"
      scale="1"
      [container]="dialScene.layers.background"
    ></sprite>-->

  </dial-scene>
</renderer>

and the parent ts component

import {
  Component, ElementRef,
  OnInit, ViewChild
} from '@angular/core';

import { AppState } from '../app.service';

@Component({
  selector: 'rotating-dial',
  styleUrls: [ './rotating-dial.component.scss' ],
  templateUrl: './rotating-dial.component.html'
})

export class RotatingDialComponent implements OnInit {
  public w = 1200;
  public h = 1200;
  public dialScene: any;

  @ViewChild('_r') public _r: ElementRef;

  constructor(
    public appState: AppState
  ) {}

  public ngOnInit() {
    console.log('hello `RotatingDial` component');
  }

  public homeSceneReady(scene) {
    console.log(scene);
    this.dialScene = scene;
  }
}

would be good if could pass a config object about:

anim { out, in }
idle
hover
click
tap

would be useful if could customize anchor

Hi guy! Hope you are doing well!

I see that you did a lot of work on your module, I'm glad to see that :) But the doc is rather incomplete for now.. Could you improve it, or add a simple example app with the 0.4.x structure? I've been using the renderer & scene components that just disapeared, so my app does not want to compile anymore.

Any help appreciated, cheers!

hey dude.
i noticed that your animation function in pixiservice, once triggered has no way of slowing down or stopping.. this wastes CPU/ram .. a better implementation would activate animation following a mouse/pointer movement or a click and pause when time passes with no activity... what do you think?

should probably do an EventEmitter that broadcasts the sprite object for manipulation inside of *.component.ts files

I.E. if in html I draw a car to a screen, if I want to TweenIt I can access the Sprite that the SpriteComponent created.