Jump to content

Introducing RUNPIXI.js


Recommended Posts

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:

function myloop() {} // do your looping stuff here
RUNPIXI.initialize("mypixidiv", myloop); // [edit] removed jQuerys # selector.

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


Edited by ben0bi
jQuery not used anymore.
Link to comment
Share on other sites

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.


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.

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.

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.


  • Recently Browsing   0 members

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