Quantcast
Channel: Pixi.js Latest Topics
Viewing all 3980 articles
Browse latest View live
↧

Getting started with pixi.js

October 6, 2016, 11:01 am
$
0
0

Hi everyone. (And sorry for my english below)

I want to change from canvas to webgl so I am learning pixi.js. But after googling on the world wide web some things are not clear for me.

A couple questions:

-How about the gameloop?

In every example they use requestAnimationFrame or something. I'm used to work with the mainloop.js library which structure is very easy:

begin();update(delta);draw();

Can i use this library with pixijs? Or is it better to use requestAnimationFrame?

And if i use requestAnimationFrame, how about delta time?

Delta time is really important to me because i often make cpu intensive simulations. The framerate will not always be 60 fps.

- What is the best method in pixijs to draw a million of separate pixels on the screen?  For example fluid simulations.

 

 

↧
Search

Glowing sprite?

October 6, 2016, 11:22 pm
$
0
0

I have an openFL project that renders to a canvas, I am planning to use pixijs as a top layer to show glowing filters on top of openFL canvas.
I already have the pixijs Canvas on top of openFL canvas.

But are there examples to achieve glowing effect on pixijs Sprite?
Here is an example in Adobe Flash Player of what I am trying to do: http://dcaclab.com/en/experiments/9900-a-simple-test-circuit

Thanks

↧
↧

Text Scaling Setup

October 7, 2016, 1:59 pm
$
0
0

Hello, I have a VERY general text question: PIXI (as well as Unity for that matter) handle text scaling by applying the scale to the post-rendered text. What I mean by this is that if you set a scale on a parent object... which then propagates to its children, the text does not get re-rendered but the cached image gets scaled by the transform. However, doing this, leads to blurry text (its known that text does not scale well up or down). The way around this is to re-render the text by rolling the scale into the font size... and allowing the text to get re-rendered by the font engine at the target scale. However... this "feature" is not supported by PIXI (or Unity). This can be worked around manually but is a pain. My question is... how is this not a problem for other users, am I missing something?

My best guess here is that in the games space... fonts tend to be large and so therefore the blurriness is not really noticeable and not an issue.

↧

Building a platformer with Pixi and PhysicsJs, good idea?

December 29, 2013, 4:53 pm
$
0
0

Hi,

 

I'm pretty new to game development. Having looked at a load of javascript libraries/frameworks (Pixi, Melon, Phaser, Lychee, WADE, etc...), I thought I would try to produce a platformer using Pixi.js.

I would like to build something that I can customize pretty heavily, so building with pixi makes sense, because I can either build my own collision systems and inbuilt physics, or use separate libraries for them.

I'm also considering combining the pixi rendering engine with something like physicsjs.

 

Having read quite a bit through these forums, I couldn't see that anyone had spoken about doing this before.

My main question is, do you think this a good idea?

Is it overkill?

I looked at box2d too, but it seems that developing with either one would be similar(ish).

 

I'm going to make a start on doing this tomorrow morning anyway, as I don't want to hesitate too long before I take the plunge, but I would love to hear of anyone else's experience or objections to doing it this way.

 

Thanks!

 

Dan

↧

Resize Texture

August 20, 2015, 3:01 am
$
0
0

Hi Pixi Gurus ;),
 

I have played a bit with Pixi and now I'm doing some productive stuff with it, but I stuck with resizing.

Currently I'm loading and cuting out a part of my Image, but how can I resize this part as (Base)Texture to ex. 64x64?

var baseTexture = new PIXI.BaseTexture.fromImage("assets/demo.png", false, PIXI.SCALE_MODES.NEAREST);var size = new PIXI.Rectangle(16, 32, 16, 16);var texture = new PIXI.Texture(baseTexture,size);

Thank you in advance ;)

↧
↧

get pixeldata in a webgl canvas

June 10, 2014, 5:49 am
$
0
0

Hi people,

 

I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't.

 

My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected.

 

Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ?

 

What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, and from that canvas (renderer.view) get the 2d context and get pixeldata..

// create separate canvas and canvasRenderer for this pixel mapvar canvasStage = new PIXI.Stage(0x000000);var canvasRenderer = new PIXI.CanvasRenderer(1024, 598, null, true);// create a texture that holds the mapvar texture = new PIXI.RenderTexture(1024, 598, this.canvasRenderer);texture.render(map);// create a sprite on our separate stage, otherwise the texture won't be renderedvar textureSprite = new PIXI.Sprite(texture);canvasStage.addChild(textureSprite);// render the stagecanvasRenderer.render(canvasStage);

after that is done, I can use this to get my pixels

var pixelData = canvasRenderer.view.getContext(("2d")).getImageData(posX, posY, 1, 1).data;

Is this the correct way to do it? or is there a better way?

 

 

regards,

Martijn

 

 

 

 

 

↧

Pixi.js Showcase

May 3, 2013, 6:26 am
$
0
0

Made anything cool with pixi.js? Post it up here and share it with the world!

 

Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it!

 

To get the ball rolling, here are some pixi.js projects that exist out on the internets:

 

games:

 

http://www.goodboydigital.com/runpixierun/

http://www.theleisuresociety.co.uk/fightforeveryone/

http://flashvhtml.com/

 

experiments:

 

http://gametest.mobi/pixi/morph/

http://gametest.mobi/pixi/balls/

http://www.goodboydigital.com/pixijs/bunnymark/

 

 

 

 

 

↧

Introducing RUNPIXI.js

October 9, 2016, 9:53 pm
$
0
0

I created a little library which sets up all the minimal stuff I need to create a PIXI screen and "game loop".

I am heavily relying to this in each of my projects. ;)

You just need to incorporate jQuery, pixi and RUNPIXI (in that order), create a div or something with a given size, and then call: 

function myloop() {} // do your looping stuff here
RUNPIXI.initialize("#mypixidiv", myloop);

..and that's it.

I think this could be usefull for everyone who is new to pixi and also for other "lazy" people.

What it does now is the following: It creates the pixi screen in the given element, using the size of that element. It creates three containers to draw on, from which the middle one can be scrolled with arrow and asdw keys. (You can turn scrolling off, of course)

Also it registers a resize event, which resizes the pixi context when the element resizes.

You can add and apply shaders with your desired names.

v0.2 enables you to capture the screen to a texture or array.

Oh, I almost forgot: Here's the link, have fun with it and gimme some credit if you like it. (in text/reputation form, I don't want your money.)

"Documentation" is in the readme file.

https://github.com/ben0bi/RUNPIXI.js

↧
Search

can i load TTF?

October 11, 2016, 1:56 am
$
0
0

Hi..

how can use True type Font in pixi.js?
 

can you give me any tips?

thx everyone!!

↧
↧

can i load TTF?

October 11, 2016, 1:57 am
$
0
0

Hi..

how can use True type Font in pixi.js?
 

can you give me any tips?

thx everyone!!

↧

Gradients in pixi4

October 11, 2016, 6:35 am
$
0
0

What's the latest recommended way in pixi4 to draw linear gradient in Sprite, without using and image for texture (run time gen.)?

↧

Pixi v3 documentation

October 11, 2016, 1:26 pm
$
0
0

Hi, 

Is there a way to access Pixi v3 documentation please ? 

some v4 bugs make it's usage impossible for me, so I need to stay on v3

Thank you

↧

pixi.js v4 - translate canvas [SOLVED]

October 12, 2016, 1:33 am
$
0
0

Hello,

I'm trying to get a coordinate system with (0,0) at the center of the screen. If I understood the API documentation correctly, adding a Container, applying 

PIXI.Container.setTransform(x, y, scaleX, scaleY, rotation, skewX, skeyY, pivotX, pivotY)

and then adding Sprites as children to that Container should apply the transformation to all of them, right?

So I created a Container, set x to width/2 and y to height/2, and added Sprites. Problem is, they still appear with (0,0) at top-left corner. Also modifying Container.x/y or Container.position.x/y would not add translations to children Sprites.

Of course I could solve the problem by adding the width/2 and height/2 offsets to every sprite I create, but I really think display parameters should be seperated from the model data. What am I doing wrong? Is there a better solution?

↧
↧

PIXI.Container, setting width bugs?

October 12, 2016, 2:38 pm
$
0
0

Could someone please explain me how the hell this is possible?

https://jsfiddle.net/f1vgvgws/2/

On line 6 (before even setting the width, it's already 500? And getting the width after setting it returns 0? I'm so confused...

↧

How can i control if BaseTexture load failed?

October 12, 2016, 11:51 pm
$
0
0

hi.

sometimes basetexture is failed to load?

I don't kwow correct reason but it is happened if many  images loaded at same time.
specially it is happened with ios(iphone)

so i wanna add reloading function. 

can you give me tips?

i'm using pixi.js 3.0.11 yet..

thx a lot
 

↧
Search

Reverse Sprite Masking, I can do this in WebGL, how do I do this in PIXI?

October 13, 2016, 2:14 pm
$
0
0

I've searched google for a bit and found that apparently this was something discussed here https://github.com/pixijs/pixi.js/issues/252 a while back in pixi.js  Despite it being simple and doable and extremely important, it was rejected from being implemented at the time.  The implementation was even shown by one of the users which was all of a few lines of code.  I would like to know how to go about doing this inverse masking approach through PIXI.js's current api, or changing code locally to make it work.  Reading through the comments it seems this was re-added as a milestone in 2015, with v3, yet I still don't see how to do this in v4?  I also searched for pieces of the code snippit: 

if(renderable.mask.invertMask) {
    func = gl.EQUAL;
} else {
    func = gl.NOTEQUAL;
}
gl.stencilFunc(func,0,0xff);

and WebGLRenderGroup.js and couldn't find either in the repository.   Any help would be appreciated. 

↧

Aw, snap!

October 14, 2016, 11:15 am
$
0
0

I still didn't make any progress with pixijs. Every time after a couple seconds i get the Aw, snap! error in chrome. I think it's caused by PIXI.Graphics. (in the begin function)

I solved it but i don't now it's the correct way: 

MainLoop.setMaxAllowedFPS(60);
//Create the renderer
var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight);
//Add the canvas to the HTML document
document.body.appendChild(renderer.view);
//Create a container object called the `stage`
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
window.onresize = function(event) {
    renderer.resize(window.innerWidth, window.innerHeight);
};
var opts = {
  "objects" : 10000
}
var fps;
function seed(){
  //the most important line in the whole game
  cells = [];
  //let's generate some random cells
  for(i=0;i<=opts.objects;i++){
    cells[i] = {
      "x": chance.integer({min: 0, max: renderer.width}),
      "y": chance.integer({min: 0, max: renderer.height}),
      "vecx": chance.integer({min: -3, max: 3}),
      "vecy": chance.integer({min: -3, max: 3})
    }
  }
}

function begin(){
  // Remove all objects we rendered last time so that we can add a new set.
  graphics = new PIXI.Graphics();// IF I REMOVE THIS LINE, I GET THE AW, SNAP ERROR!
  stage.removeChildren();
}

function update(delta){
  //update cells
  for(i=0;i<cells.length;i++){
    cells[i].x += cells[i].vecx;
    cells[i].y += cells[i].vecy;
  }
  //fps
  fps = Math.round(MainLoop.getFPS()); //usually 6 fps only
}

function draw(){
  //add the cells as children
  graphics.beginFill(0xFFFF0B, 1);
  for(i=0;i<cells.length;i++){
    graphics.drawCircle(cells[i].x,cells[i].y,1);
  }
  graphics.endFill();
  //Tell the `renderer` to `render` the `stage`
  stage.addChild(graphics);
  text = new PIXI.Text('FPS: ' + fps,{fontFamily : 'Arial', fontSize: 12, fill : 0xff1010, align : 'center'});
  stage.addChild(text);
  renderer.render(stage);
  //drawing fps
}

//calling seed function
seed();
//setting up loop
MainLoop.setBegin(begin).setUpdate(update).setDraw(draw).start();

Im using mainloop.js and chance.js as libraries.

And why is my fps so slow?

↧
↧

Graphics Drawing and Memory Issues

October 14, 2016, 2:44 pm
$
0
0

Hey everyone!

First time JavaScript and Pixi dev here at college and I have a project where our team is making cursors leave behind "paint."

Right now I declare a global then assign. I add that to the stage and in the loop I begin and end fills. However this is causing so much memory build up Chrome is crashing. I was looking for advice on how to do so as when I tried sprite creation for the paint my game soon began to loose frames.  

OUTSIDE OF LOOP

//Global
var graphics;

 

 

//During setup
graphics = new PIXI.Graphics(); 

stage.addChild(graphics);

 

 

//function play()

graphic.beginFill(color);

graphics.drawRect(brush1.x, brush2.x, 5,5);

graphics.endFill();

(REPEAT FOR BRUSH2)

 

 

 

That's is it, the basic idea, it just draws graphics which is already added to the stage outside of the function loop. Checking memory the graphics update buffer/webGL explodes with memory eventually after a while crashing when too much drawing occurred. 
 

↧

Traviso.js: blurry pixel art objects based on position

October 14, 2016, 11:28 am
$
0
0

As I'm planning to make an HTML5 MMO Isometric game, I'm experimenting various Frameworks/Isometric engine that could help me to speed up my work.

Now I'm trying this "Traviso.js" that seems to be really good and well documented, but now I'm getting a problem (probably is of Pixi.js more than Traviso): depending on the position of the object, I'm get some blurried items, this is really bad for pixel art items/objects that needs to be pixel-perfect without any filter applied on it.

5b0fd928-924b-11e6-93b0-56a7069bf50f.png

This is my code: 

    ////// Global on-frame renderer function
    function update() 
    {
        renderer.render(stage);
        requestAnimationFrame(update); 
    }

    ////// Here, we initialize the pixi stage
    var gameCanvas;
    var gameWidth, gameHeight;
        
        gameCanvas = document.getElementById('mycanv');
        gameWidth = window.innerWidth;
        gameHeight = window.innerHeight;

    // create an new instance of a pixi stage
    stage = new PIXI.Container();

    // create a renderer instance
    renderer = PIXI.autoDetectRenderer(gameWidth, gameHeight, false , false);
        
    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    update();

    ////// Here, we create our traviso instance and add on top of pixi

    // engine-instance configuration object
    var instanceConfig =
    {
        mapDataPath : "mapData.xml", // the path to the xml file that defines map data, required
        assetsToLoad : ["test.png", "chair.gif", "carpet.png"], // array of paths to the assets that are desired to be loaded by traviso, no need to use if assets are already loaded to PIXI cache, default null
        tileHeight : "33",
        isoAngle : "27",
        initialZoomLevel : 0
    };

    var engine = TRAVISO.getEngineInstance(instanceConfig);
    stage.addChild(engine);

Any advice on how to fix this blurry problem?

↧

Visual glitch on v4 + WebGL + TilingSprite

October 16, 2016, 1:22 am
$
0
0

Hi guys,

I developed a PixiJS rewriting of XMoto for the web : http://js.xmoto.io/ (original version is here: https://xmoto.tuxfamily.org/)

Everything works quite well, but as I want to update PixiJS version from version 3 to 4, I get a weird visual glitch using WebGL and TilingSprite (it doesn't happen on canvas2D!).

Do you have any idea why this happens? Am I the only one having this issue as TilingSprites are quite common?

Staging version on V4 is here: http://staging.xmoto.io (you should directly see the glitch).

Open Source code is here: http://github.com/michaelhoste/xmoto.js

Typical code for sky is here: https://github.com/MichaelHoste/xmoto.js/blob/master/src/level_elements/sky.coffee#L30 and here: https://github.com/MichaelHoste/xmoto.js/blob/master/src/level_elements/sky.coffee#L51

I'm running on MacOS 10.12 (Sierra) on a mid-2012 macbook pro retina.

Do you see anything obvious ? :-)

Thanks

Capture d’écran 2016-10-16 à 10.03.10.png

↧
Viewing all 3980 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>