Using HTML widget for pixi.js - possible to do without iframe?

Using JavaScript with Hype
#1

waterripple.hype.zip (263.5 KB) Hey all,
I'm using pixi.js to create a water ripple effect on an image. Pulled it off by using an HTML widget and putting the code inside. It's working well. Haven't seen this type of thing on the forums so posting my project here.
I'm wondering though, is it possible to use this script without needing the widget/iframe.

Project attached.
Thanks!

#2

Is your goal to just ripple the single image? Keeping it as a HTML widget is absolutely fine. Otherwise, you could add the script within a JS function.

The only adjustment you would need to make is ${resourcesFolderName}/filename.png whenever you reference an image in the resource library.

At this point, you'll want to change these two lines:

  app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
 document.body.appendChild(app.view);

The Pixi 'app' is rendering based on the window's width and height, and then appending it to 'document.body'. So this is filling the HTML widget, but might not work well without a transparent background setup for Hype's document.

What do you want the size of the ripple to be?

#3

waterripple-functionHype.hype.zip (227,0 Ko)

Hello !

I wanted to test pixi.js, this is the opportunity.

Here is the file with the integration of the pixi function (with your parameters) in Hype :wink:

preview

3 Likes
#4

Nice work! :+1: I prefer the Function version because a wave is still okay but anything else would maybe become very annoying while editing. On the other hand you get direct feedback without running a preview but then again maybe you depend on other interactions with Hype. That would only really work when previewing. Pixi.js is really cool but adds 360kb to projects. Not a problem in most cases except for banners and video exports might not sync up correct.
That said, pixelanimation here we come!

#5

Hey Folks, you can customize your Pixi.js runtime here and really trim the edges of unused functions. This gets you in a more decent 170 KB region if load times / limits are of any importance to you. :nerd_face:

https://pixijs.io/customize/

1 Like
#6

Very cool!
Ok yeah that makes sense, create the pixi function in the hype resources and call it on scene load. Also useful to know how to load in images from the resource library properly.

And yeah my original functionality is to use that water background and have it ripple as I animate characters ontop. It feels cleaner to do it without iframes, although maybe it makes so difference to the end user.

thanks!