Augmented Portal Space Example

[Mark]

Hi All,

I’ve put together this example project complete with video walk-through to help inspire people to take part in this competition and see what’s possible with ZapWorks Studio and a few hours of time.

It’s by no means a polished experience but does touch on the main points that make ZapWorks Studio so powerful including timeline animations, 3D models and scripting.

Any questions feel free to ask below

Target Image
You need to tap on the door to start the experience, I should have made this more clear in my design.

Original image here - https://pixabay.com/en/door-bare-wood-old-entrance-exit-1537362/

I think I also got the space images from this site but I forgot to bookmark them.

Video Walk-through

https://youtu.be/yT06IaHAwxs

Links

• Advanced Zapcode Customisation - https://docs.zap.works/best-practices/zapcodes/advanced-zapcode-customization/
• Moon 3D model (OBJ) - https://www.turbosquid.com/3d-models/moon-3ds-free/553741
• Existing Augmented Portal Tutorial - https://docs.zap.works/studio/tutorials/augmented-portal/
• Target Events (seen and notseen) - https://docs.zap.works/studio/tutorials/target-events/
• Creating Buttons (pointerdown) - https://docs.zap.works/studio/scripting/examples/creating-buttons/

Thanks,
Mark

[stevesanerd]

Thank you Mark!!!

I am working on a opening door right now and this will help so much!!
You wouldn’t mind sharing the time line info you used?
If not I have something to work off of.

Thank you!!!
Steve

[Mark]

Hey Steve,

Here is a screenshot for you to look at.

The rotation was a simple 90 degrees to go from closed to open. Altering the doors position I did bit by bit (by eye) because the pivot of the rotation is on the center of the door not the hinges like it would be in real life. I also scale it down so it looks like it’s shooting off into space getting smaller in the distance, though I’m not sure you can actually see that from the angle.

Thanks,
Mark

[stevesanerd]

Thanks mark.
I did the same thing from the video. I’m just about to post my zap.

Steve

[kumarnirmalasrujan]

Hey mark can u explain how is the door in TARGET image is not seen after the animation starts for me it is not working ??

[stevesanerd]

I took me a bit to get it to work as well. This may help out. I cut out extra parts from my zap so all that’s left is the door. Use my target image to test. Feel free to copy my code.

Door HELP.zpp (5.2 MB)

[kumarnirmalasrujan]

wow, that’s a cool portal in there,

can u explain more about 3d Room inside the portal how have u aligned that

Is that a 3D model by itself ???

[stevesanerd]

The photo of the book is just a Jpg file on a plane in the test file, But in my full one I submitted for the competition it is a 3d model of a 3 walled box with floor. I set textures to the walls and floor to get store look.
After that I added my other 3d models and just moved them to place. One thing about the portal is the order of things. This is a copy of my finished list. The inside for the store is its own group to help with that.

[mark.gerritsen]

Hi,

wanted to share a trick I just used for an opening door without a lot of math or eyeballing; that’s how I started out and it just didn’t look right: this works for me! (I’d add my project, but my ‘door’ doesn’t look anything like a door, so I figure it’d be more confusing than helpful)

• Create a new Subsymbol (click the + behind ‘Symbol Definitions’ on the right, name it, choose Blank Symbol)
• Edit the new Subsymbol (double click on its name under ‘Symbol Definitions’)
  • Create a plane (drag from Media Library to root)
  • Scale the plane to twice the sice of the door (Properties > Scale)
  • Create a new group (right click on root, New > Group, name it)
  • Position the new group on the plane, so that it is centered vertically, and horizontally at 1/4th, between the center and the edge
  • Make the group an attachment point (right click on the group, Expose as attachment point, name it)
  • Make the plane transparent (select it, Color > Set Opacity to 0%)
• Go back to the main part of your project (click on it at the top of the screen)
• Create an instance of your new SubSymbol (Drag your new SubSymbol Definition to root, name it)
• Create an attachment point (right click on the Subsymbol under root, New > Attachment point)
• Load the image of your door into your project (Click the + behind Media > Import Media Files)
• Attach the door image to the attachment point (drag it from the Media Library to the Attachment Point)

Now you can position the SybSymbol in your scene, and use its rotation to pivot the door around its ‘hinges’, without any further math.