oop with pixi --beginner

[espace]

//text.js above main.js in my index.html
var e = function() {

var style = {
    font : ' 36px Luckiest Guy',
    fill : '#F7EDCA',
    dropShadowColor : '#000000',
    dropShadowAngle : Math.PI / 6,
    dropShadowDistance : 6,
    //wordWrap : true,
   //wordWrapWidth : 1000,
    //LineHeight : 4,
};

e.body = new PIXI.Text('level ',style)
e.body.anchor.x=.5
e.body.anchor.y=.5
e.body.x=50
e.body.y=100

}

//main.js below text.js in my index.html

var stage = new PIXI.Container();
var interactive=true
stage.interactive =true ;	

// create a renderer instance
var renderer = PIXI.autoDetectRenderer(320, 480);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

requestAnimationFrame( animate );

var hud = e()

stage.addChild(hud);

function animate() {

	requestAnimationFrame( animate );

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

Hi, i don't knwo how to set correctly my text.js to be used as a OOP object. 

I can't see my text who is hud in my main.js....why ?

I take the example of a text but it could be a rectangle or something else...

Thanks for your response.

[ivan.popelyshev]

You have to extend PIXI.Container class, you cannot just add any object in the stage.

[espace]

var stage = new PIXI.Container();
stage.addChild(hud);

it's that no ?

could you post me an example ?? sorry i come from lua/Corona and there is a lot of things that are different.

[ivan.popelyshev]

Like Container extends DisplayObject, your thing has to extend Container: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js

Just remove all below the " Object.defineProperties(Container.prototype, { " and write your own methods

[espace]

Sorry i don't see.  I have follow this tutorial :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

but they don't explain how to use with new.Graphics or something else.

have you a good recommandation for me to learn this feature ?

[espace]

this works but it's not really what i'm lokking for

//text.js

var style = {
    font : ' 36px Luckiest Guy',
    fill : '#F7EDCA',
    dropShadowColor : '#000000',
    dropShadowAngle : Math.PI / 6,
    dropShadowDistance : 6,
    //wordWrap : true,
   //wordWrapWidth : 1000,
    //LineHeight : 4,
};

var e=function() {
e.body = new PIXI.Text('level ',style);
e.body.anchor.x=.5;
e.body.anchor.y=.5;
e.body.x=50;
e.body.y=100;
}


//main.js below text.js in my index.html

var stage = new PIXI.Container();
var interactive=true
stage.interactive =true ;	

// create a renderer instance
var renderer = PIXI.autoDetectRenderer(320, 480);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

requestAnimationFrame( animate );

e()

var hud = e.body

stage.addChild(hud);

function animate() {

	requestAnimationFrame( animate );

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

 

 

[espace]

//text.js
var e=function(cont) {

var style = {
    font : ' 36px Luckiest Guy',
    fill : '#F7EDCA',
    dropShadowColor : '#000000',
    dropShadowAngle : Math.PI / 6,
    dropShadowDistance : 6,
    //wordWrap : true,
   //wordWrapWidth : 1000,
    //LineHeight : 4,
};

e.body = new PIXI.Text('level ',style);
e.body.anchor.x=.5;
e.body.anchor.y=.5;
e.body.x=50;
e.body.y=100;
cont.addChild(e.body);
}


//main.js
// create an new instance of a pixi container
var container = new PIXI.Container();
var interactive=true
container.interactive =true ;	

// create a renderer instance
var renderer = PIXI.autoDetectRenderer(320, 480);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

requestAnimationFrame( animate );

// create a texture from an image path

var hud = new e(container)

hud.body.x =200
hud.body.y=300

function animate() {

	requestAnimationFrame( animate );
	renderer.render(container);
}

ok i believe that i'm understand. this example work well.... is it ok ?

 

[espace]

for helping the beginners as me.

Here is the best solution. 

 

// create an new instance of a pixi container
var container = new PIXI.Container();
var interactive=true
container.interactive =true ;	

// create a renderer instance
var renderer = PIXI.autoDetectRenderer(320, 480);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

requestAnimationFrame( animate );

// create a texture from an image path

var style = {
    font : ' 36px Luckiest Guy',
    fill : '#F7EDCA',
    dropShadowColor : '#000000',
    dropShadowAngle : Math.PI / 6,
    dropShadowDistance : 6,
};

var T={}
T.tex = function(textafficher,pos,poy) {
PIXI.Text.call(this,textafficher,style);
this.x=pos
this.y=poy
this.flag=true
};

T.tex.prototype = Object.create(PIXI.Text.prototype);
T.tex.prototype.constructor = T.tex;


var button=new T.tex('coudjdhjdhcou',0,200)
var button2=new T.tex('bilout',0,100)

container.addChild(button,button2);

//button.y=400
alert(button.flag)

function animate() {

	requestAnimationFrame( animate );
	renderer.render(container);
}

 

[ivan.popelyshev]

I dont recommend for newbies to take your approach. I recommend to learn javascript first. I already send you a link to pixi.js github repo where you can see how javascript classes are created and extended.

[espace]

hi @ivan.popelyshev

it's certain that is better to follow the javascript classes of pixi.js.

But for a newbie, it's very difficult to understand because the pixi.js code is very abstract and there is no object or some thing tangible behind. 

With a concrete example, it becomes easier to assimilate.

[mattstyles]

Pixi follows the accepted way of forcing classical inheritance into a language that does not support it out of the box, it has been the 'accepted' and 'usual' way of creating and extending 'classes' in JS for years and years and years. The ES2015 syntax adds a `class` keyword but it essentially (currently) does the same thing as the interpreter can not do anything else, JS is prototypal and not class-based.

If you learnt JS, then reading through the Pixi code is a breeze, it follows well established patterns and is generally exceptionally well organised in that style. Nothing advanced or 'overly clever' (unless you consider inheritance overly clever, there are many that do).

Ivan suggested that if you know your JS then understanding how to extend Pixi objects is a doddle, and I completely agree. Pixi code is inherently not-abstract when you know your JS, its based on established patterns.