Sign in to follow this  
ben0bi

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:

<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

Edited by ben0bi
jQuery not used anymore.

Share this post


Link to post
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.

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.