These are chat archives for pixijs/pixi.js

22nd
Sep 2016
Yuri Karasev
@yurakaras
Sep 22 2016 01:51

Greetings, mentors ) i am totally newbie in animation in browsers (except simple JQ moves and transitions)... So i made a review for meself of frameworks. Found PIXI pretty, neat and easy to start with.
My aim is create a kind of free flying sprite (image) on the main page, making it on the top (z-index >), and clickable... Under this canvas object, there should be still usual HTML page with menu, content, etc...
So i managed to do this
http://avatar-planet.ru/_shark/pixi/shark.html

And if i position container div right after the body (of full index page) , and make it absolute and z-index 1000... Canvas for sure blocks links on the site.

Where should i dig? Thanks

Chad Engler
@englercj
Sep 22 2016 01:58
If you place a canvas element on top of your page, you will not be able to click through the canvas onto elements below (you can simulate it, but I wouldn't recommend it). Might be better to have the canvas be the size of the sprite and move the canvas element around the page so it doesn't block everything.
Yuri Karasev
@yurakaras
Sep 22 2016 02:10

So at the moment in context of using PIXI terminology -

  1. Append PIXI renderer (with width height) to DOM (in a div)
  2. Create Stage obj - PIXI.Container
  3. Create few PIXI.Sprite instances from PNG, and add them as child for Stage.
  4. With help of requestAnimationFrame i change properties of sprites, and calls PIXI renderer - render method for stage...

if changing toward @englercj point, i understood that Renderer - in HTML - Canvas object, initially has 800,600 default size... And should i create few Renders with small (as sprite sizes) and then some way i should change the position of Render or i am getting it wrong.

Chad Engler
@englercj
Sep 22 2016 02:12
what effect are you trying to achieve
if you want elements moving around on top of your html page, maybe it makes more sense for them to be html elements instead of pixi renderers
is there something from WebGL that you need over just moving around an image element?
Yuri Karasev
@yurakaras
Sep 22 2016 02:20
From WebGL seems not. I tried PixiJS more for this https://pixijs.github.io/examples/#/demos/tinting.js example, the code seemed neat for me. Being stupid about animation (except linear functions), i need the same animation logic (and its probably again has nothing to with WebGL)... I thought that Pixi code is shorter, so in case i have only few PNG sprites-images, it will be pretty the same task with jQuery or vanilla JS?
Position a div on the top, animation...
Vanilla JS probably nope, this physics attributes like direction, turningSpeed, acc... I better be choose lib or framework for this
Chad Engler
@englercj
Sep 22 2016 02:24
You can do what you want in just CSS
Yuri Karasev
@yurakaras
Sep 22 2016 02:24
CSS3 transitions and transformations - towards this ?
Chad Engler
@englercj
Sep 22 2016 02:24
yeah
css3 transforms for the rotation, just move the element position around for translation, and tint using a semi-transparent before element in css
since you want to be clicking and interacting with a web page beyond the sprites, that is probably your best bet
pixi above DOM doesn't really make sense
below can be interesting though
Yuri Karasev
@yurakaras
Sep 22 2016 02:29
@englercj much obliged, just should justify for myself the logic (algebra) for moving around the viewport, and plain CSS3 style seems a bit obscure for me... Well i will into LESS,SCSS or some js lib based on CSS3 anim... PIXI for my task is overhead...
Does Pixi work with SVG ?
Chad Engler
@englercj
Sep 22 2016 02:31
We draw to canvas using WebGL or Canvas2D APIs
we can use an SVG as a texture, but we don't draw to SVG
moving around the viewport is just a matter of setting the top and left style attributes
Yuri Karasev
@yurakaras
Sep 22 2016 02:33
@englercj Chad, thanks. and stupid question - the HTML element (tag) always "CANVAS" , but the underneath there could be WebGL renderer or Canvas2D ... am i getting it right ?
Chad Engler
@englercj
Sep 22 2016 02:33
or even better just set the transform: transform: translateX(5px) translateY(5px) rotate(90deg);
The element in your DOM is always a <canvas> element
we use different APIs to draw to it, depending on the renderer
Yuri Karasev
@yurakaras
Sep 22 2016 02:34
i got it
Chad Engler
@englercj
Sep 22 2016 02:34
Cool, let me know if you have any other questions
good luck with your project!
Yuri Karasev
@yurakaras
Sep 22 2016 02:40
seems FF dev tools with few other settings enabled, shows a lot of new info for me. Well seems the web-development gets more and more complicated. Thanks for answers and opensource contributions and commits into this area!
my project is nada ))
Daniel
@bitbay
Sep 22 2016 09:59
@ivanpopelyshev i created a new branch of the dragonbonesjs fork of mine. There You'll find the exact test cases i am talking about.
  1. Clone the repo
  2. switch to the "skewtest" branch
  3. run a local web server (i use http-server for it's simplicity)
  4. open up Pixi\Demos\skew_test_pixi3.html
  5. all right all good (to check against an "original", see the animated gif
  6. click on the anchor of "pixi v4" on the webpage
  7. ...now that is strange. I noticed that although "skew" seems to be ok, it is inverted..