Jump to content

oop with pixi --beginner


espace
 Share

Recommended Posts

//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.

Link to comment
Share on other sites

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);
}

 

 

Link to comment
Share on other sites

//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 ?

 

Link to comment
Share on other sites

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);
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...