Using external libraries


#1

Attached is a file with some *.ts files which are some useful external libraries adapted to work with ZapWorks Studio and their respective zpp examples: The libraries included are:

matter-js
node-particles
popmotion
Ramda

They add support for physics, particles, programmatic animations and functional programming, respectively.

You can use these examples to adapt other external libraries you wish to use with zappar.

Disclaimer: I didn’t make any of these libraries, I just modified them a little bit to make them work with ZapWorks Studio(didn’t change any functionality, just some things to make them run in zappar. You can check the original source code and my modifications to verify that). External libraries are not officially supported by zappar, so at some point one or more of these libraries may stop working. Use them at your own risk.

externalLibraries.zip (380.8 KB)


#2

I LOVE THIS!!!
I was thinking something like this would work. My problem is I really haven’t used TS outside of Zapworks, because it’s more for website.

Question, How did you get the ts files? looking at say the Popmotion to install you can use;

npm install popmotion --save
yarn add popmotion

or download
https://unpkg.com/popmotion/dist/popmotion.global.min.js

<script src="https://unpkg.com/popmotion/dist/popmotion.glo

But the js file isn’t the same as yours. So how do I get the file? or if it’s a script IE
<script src=“https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.10.0/lodash.js”></script>

Thank you!!
Steve


#3

Question, How did you get the ts files?

On popmotion’s case, https://unpkg.com/popmotion@8.7.1/dist/popmotion.js . What you linked is the minified version. Oh yea they are .js files, I just changed the extension to .ts, since that is what ZapWorks Studio uses. Sinces Typescript is an extension of javascript, javascript code runs on a typescript environment mostly without changes.

I LOVE THIS!!!

Great :wink:

I think matterjs needs a little more explanation, it’s more complicated because I was making a symbol for platform games like Mario:

The function that makes it work with ZapWorks Studio is Bodies.fromRectangularNode under matterjs script. You can make a body from a ZapWorks Studio node using it. The Bodies.toRelativeToScreen gets any node and if it’s relative to screen left or right, it makes them relative to screen. This is because matterjs doesn’t have a concept of relative to screen right or left, everything is relative to the screen. So you can have nodes in the hierarchy relative to screen right or left, and adjust the positions you want, then the toRelativeToScreen will change the node to be relative to screen on runtime(and stay on the same place of course). If you hit the bottom of the question mark block(by jumping, like Mario) you can get a coin, or a mushroom that moves just like in mario games :grinning:. And you go to level 2 by killing the gumba, jump on top of it.


#4

I knew that TS is an expansion of JS. I’m just not sure on how to get the files or what files are all needed at times.

I have some JS codes that i want to try but it pulls the JS files at run time. With zapworks I know we will have to have it in the code because it wont pull it. I guess that’s what I need to figure out still.

Thank you again!!
Steve


#5

I’m just not sure on how to get the files or what files are all needed at times.

Usually it’s a single file that has everything, but if you can’t adapt the single file you can get all source files on github and put them together in one file.

I have some JS codes that i want to try but it pulls the JS files at run time. With zapworks I know we will have to have it in the code because it wont pull it. I guess that’s what I need to figure out still

Hopefully with the examples I provided you can figure it out, but feel free to ask. Basically anything that ZapWorks doesn’t recognize you use declare const whatzapworksdidntrecognize, other times there are functions that expects x number of arguments but the code uses the function with less arguments, and typescript complains. So you set default parameter values for those, usually undefined. You check the code in the function for that. Other times typescript complains that a property doesn’t exist, so you set the property like (myobject as any).troublesomeproperty = somevalue. I think that’s about it.


#6

Thank you!

Steve


#7

Can you post the file or link to it for the popmotion file.I’m having a hard time finding the right one. I see your edited one in the zip file but would like to look at the unedited one. It will help me understand what you did better.

Thanks,
Steve


#8

I already did on my first reply mate ^ :wink:


#9

LOL that what I get for not looking. :wink:
I just thought it was a copy of the link I posted.

Thanks.
Steve

Ps. I’m looking into the Paper.js from this post https://forum.zap.works/t/draw-to-canvas/4998


#10

Ps. I’m looking into the Paper.js from this post Draw to canvas

Well, the canvas is not accessible for us, so we can’t leverage the power of such libraries in Zappar to do cool things. All particles libraries I found for example, work on the canvas. Except for node particles, that I referenced on my post.


#11

To bad we can’t get our hands on the Canvas_API or WebGL_API codes and make our own canvas in Zappar. :wink:

Well I have been trying to get my Ajax to work with my https://restdb.io/ test db. I can “GET” my data but when I “POST” the data doesn’t make it yet I get a new entry listed. I just can’t figure out why.

When I do get it to working I want to use there Real Time Chat (https://restdb.io/blog/realtime-rest-events) to setup a multiplayer ZapBox game I have been working on. That’s why I have been trying to the external libraries to work from me. They have a simple chat setup HERE, but the code calls some script that call some more script.

I guess I just need to get the “POST” to work first. :grin:

Thanks,
Steve


#12

Well I have been trying to get my Ajax to work with my https://restdb.io/ test db. I can “GET” my data but when I “POST” the data doesn’t make it yet I get a new entry listed. I just can’t figure out why.

You encountered the CORS bug in zappar. The post shows a solution. Basically you need to set up a proxy.


#13

I don’t know if it’s the CORS bug. I asked the user who used this HERE and restdb.io has CORS. He said it works. I didn’t want to set up a proxy that’s why I was trying this one.

Thanks,
Steve