ben0bi

I just removed all jQuery references in v0.3. Thanks for your critics. Adjusting the original post to it. Regards

stuff...I am a lazy person, that is why I made this whole thing. Why not use jQuery if it will be used anyway? (on my side) I can look for making a jQuery-free version, it is used right now for initializing and maybe some other stuff. **review-engine on...no fuel...later. ** Also, I am a general programmer, I can use almost every language but on the other side I don't know about the "tricks" a specific (JS)programmer would use. So, the code may be somewhat "naive", but it works...hope you like it, though. [EDIT] jQuery used for: + Check if the loop function parameter on initialize is a function. (jQuery.isFunction()) + Check if the pixiscreenID parameter on initialize returns any elements. ($(pixiscreenID).length) + Get the jQuery elements with that id. (I could use here findElementById from html, but..) + Append the renderer to that element (hopefully just one) ($(pixiscreenID).append()) + Get the width and height of the element on resize. That's it. It's not much, but, for example, how do I get the css width and height with "DOM-JS" ? I will remove that jQuery as soon as possible, if I can handle it. You are invited to make a pull request if you already did it.

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 [edit: jQuery not needed anymore in v0.3], pixi and RUNPIXI (in that order), create a div or something with a given size and an id, and then call: <script> function myloop() {} // do your looping stuff here RUNPIXI.initialize("mypixidiv", myloop); // [edit] removed jQuerys # selector. </script> ..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

In other posts, it says that (HTML) getImageData is really slow. Also, if using the fast webGL, why use the lame DOM (canvas) stuff? I created a RenderTexture and rendered the screen on it. I can put that texture in a DOM element with $('#mydiv').html(tex.getImage()) and it is fast enough. Now I need to find out, how to get the pixel data from that texture, but first step is made. Here's some code: // render the screen to a texture. You need your pixi renderer and your root stage/container. var origTex = new PIXI.RenderTexture(renderer, renderer.width, renderer.height); origTex.render(_PIXIRootStage); [edit] /* to render a sprite to a RenderTexture (including rotation, scaling and all the stuff), just add it to an empty container and render the container to the RenderTexture (do not add it to the root stage.) You need to find out width and height of your rotated and scaled sprite, though. */ var container = new PIXI.Container(); container.addChild(mySprite); var renderTex = new PIXI.RenderTexture(renderer, myWidth, myHeight); renderTex.render(container); /* [edit2] ...and now we can extract the pixel data like that: */ var pixels = PIXI.extract.webGL.pixels(renderTex); // the pixels are stored in a 1dimensional array of size 4*width*height. I hope that helps. Regards, Beni Yager

I effectively need a way to get the texture scaled on pixel basis, to output the created texture as array to a selfmade LED screen. I use a RenderTexture which renders the whole screen, and want to rescale the texture (on pixel data basis, as said before). I cannot get it to work: tex = new RenderTexture(renderer, mywidth, myheight, PIXI.SCALE_MODE_NEAREST, scale) => I scaled it down to myWidth, myHeight but it only takes the myWidth, myHeight part on the screen itself and scales that one down, much blank space left. tex = new RenderTexture(renderer, renderer.width, renderer.height, PIXI_SCALE_MODE_NEAREST, scale) => scaling works and it takes the whole image, but the output texture is as big as the screen itself, also with much blank space. I can not find a way to get a 100x100 texture out of a 400x400 screen, scaled properly. Can anyone help here, please? And please, no sprites. I need the pixel data at the end (to remember, this is the third time. ) Thanks in advance for your answers. [EDIT] OK I got it, we need sprites. It works now. Here is my code for all who may need it. // get screen data. this.getScreenAsTexture = function(renderWidth, renderHeight) { // _PIXIRootStage is the container which has to be scaled and rendered to texture. // _PIXIRenderer is the renderer of this class. var renderer = _PIXIRenderer; // set render size if <= 0 if(renderWidth <= 0) renderWidth = renderer.width; if(renderHeight <= 0) renderHeight = renderer.height; // compute scaling factor. var scale = 1; var sc = renderWidth; var sc2 = renderer.width; if(renderHeight<renderWidth) //[edit] use smaller instead of bigger value. { sc = renderHeight; sc2 = renderer.height; } if(sc > 0 && sc2 > 0) scale = sc / sc2; // first, render the screen to a texture. var origTex = new PIXI.RenderTexture(renderer, renderer.width, renderer.height); origTex.render(_PIXIRootStage); // create sprite and container to resize the texture var stage = new PIXI.Container(); var sprite = new PIXI.Sprite(origTex); sprite.scale.x = scale; sprite.scale.y = scale; stage.addChild(sprite); // render the original again in scaled mode. var renderTex = new PIXI.RenderTexture(renderer, renderWidth, renderHeight); renderTex.render(stage); return renderTex; };

I found a solution to this. (Still using pixijs v3) In another post on another page, it stated that the first filter in the filter array does it wrong but if you add the shader a second time, it will work. I did NOT use that solution, because there is a .shader variable. Using this, vTexCoord works just fine. MySprite.filters = [shader, shader] <-- the mentioned fix, which I do NOT use. MySprite.shader = shader <-- This works just fine. But you can use just one shader. I need only one shader so this is fine. Maybe we can use multiple "simple" shaders in the .filters array and one "complex" shader in the .shader variable. I hope the two do not overwrite each other.

So, I have set up my first shaders which just change colours. Now I wanted to make a gradient shader but it won't work right. It says: vTextureCoord is between 0 and 1. It is not. I apply the shader to some 16x16 Images, scaled to 2, and coords are way under 0.5. To get the ALMOST right coordinate, I had to multiply it with 16. But also then, the gradient was a few pixels away from where they should be. With x, it works "almost" right, but with y it works...not right. It's 1 in about the first quarter. (with *16.0, else it is black) Can anyone explain that to me? PS: The screen is in a div with varying size (x) and 400px height. It SHOULD work with that one, but if I copy that code, the above behaviour is given. http://codepen.io/anon/pen/ORgkgY (not from me) Thanks for your reply. Code is at work place, I will post it soon.