Spark AR Patches: switching between 3 canvas - augmented-reality

I have the following elements:
Canvas1 (1 rectangle/material - initial instructions),
Canvas2 (1 rectangle/material - core image & 1 audio with its Playback controller),
Canvas3 (1 rectangle/material - trivia image).
The effect I want: when opening I see Canvas1 visible, tap 1 the Canvas2 & Audio, tap 2 the Canvas3. END
The problem: It is not working.
What happens?
Opens as planned (Canvas1).
On tap1 as planned (Canvas2 & Audio).
On tap keeps Canvas 2 on the back and shows Canvas 3.
If I tap it keeps changing between Canvas 2 and 3.
The new patches structure
This is an image for the patches editor image for the patches editor

I solved the problem by simplifying the solution. I built an animation with the images (former Canvas 1, 2 and 3) inside a rectangle, and added the Audio to a tap trigger. Now it is working. Nevertheless, if somebody has an answer to why I had the problem, I very much appreciate it.
Attached you can find the final patches configuration.final patches configuration

Try to connect the visibility of Canvas 2 to the counter value just like you did with the other ones. Check the corrected patch image

Related

Draggable background boxes as sliders in Swift

I am currently using XCode 8 and Swift 3 and I have been searching and haven't been able to find a way of being able to complete what I want to do - basically, I want to be able to have a progression box behind text which I am able to drag from the left to the right to be able to have a 0-100 slider. I have created a mock-up to be able to attempt to describe what I am attempting to achieve, the progression bars in the background should be able to be slideable which will update the progression number once it has let go.
Any help would be appreciated on this as I have been stumped for awhile now.
Here is the mock-up:
One method: use a UISlider "under" the labels. Might be able to get away with tint colors - if not, then transparent images for thumb and max track image, and just-a-little translucent image for min track image.

Swift / SpriteKit: How to create a water drop effect?

i wonder how the following effect could be made in Swift (SpriteKit).
I think about adding some ShapeNodes and fill them with the background image with -yscale 1.
But i think this effect was made somehow different, because the background image isn't just mirrored horizontally - it also has some graphics effects on it (it is mirrored in the shape the water pearl has and so on).
Was it done with a ShaderNode?
Does someone has an idea how i could create a same effect in SpriteKit - like water pearls which looks like they are on the "camera" and they mirror the background "waterpearl like"?
Thank you.
Hmm well you could create a bunch of water images and have them displayed randomly on the screen at some z position, however I think this effect was made in another program like unity or something of the sort, Your best bet is to create transparent water droplets as images and have them displayed randomly on your screen.

Scaling SVG past unknown threshold causes elements to disappear

I'm using openseadragon with the excellent svg overlay plugin.
On Chrome, the app behaves as expected: users can tap to zoom in until a table rendered in SVG is fully visible, the note on the table is legible.
Here's the link to the demo. Zoom out to see the SVG version of the table appear, overlaying the fuzzy raster version of the background.
On Safari on iOS or OSX when zooming past a seemingly arbitrary threshold the table and everything on it start to disappear. The point of disappearance seems to depend on other factors I don't understand, hence this question for insight. For example, a orange circle drawn with two.js will disappear when the scale transform is precisely 51201 (at 51200 the circle is there). For the more complex table SVG, elements on the table will disappear at different scale levels, between ~23000 to 50000. Sometimes they'll disappear and then reappear upon a slight zoom in. Sometimes they'll disappear on zoom and then reappear as I pan around, the objects nearing the edge of the viewport.
IE 11 has a very similar issue.
Has anyone dealt with this before or solved it?
That's a really slick project!
In my experience, that kind of problem with SVG disappearing has to do with extreme amounts of zoom. The good news is you should be able to work around it by changing your viewport coordinates. By default the width of the image is a viewport value of 1, but you can set your image to be width 10,000 or some such, which will look exactly the same on the screen, but it means that the SVG thinks it's zoomed out a lot at first, so when you zoom in you can go a lot further.
If you're using two.js, another possible fix would be to switch over to canvas rendering and use https://github.com/altert/OpenSeadragonCanvasOverlay.
Btw, I'd love to share your project when it's done... please file a ticket at https://github.com/openseadragon/site-build/issues when you're ready and we can add it to http://openseadragon.github.io/examples/in-the-wild/.

Create Super Mario Mozaic Blendig Effect

I am interested in creating a blending effect for a screen transition that takes the current view and pixelates the view and fades out.
The blueprint would be from Super Mario World on the Super Nintendo / Super Famicom.
I attached a YouTube video of this effekt. You can see it at 0:50 before "Mario Start" is shown.
https://www.youtube.com/watch?v=naD6mNeHIsE
I wanted to implement this blending effect in an iOS game in Objective-C or Swift. That does not matter at the moment. I am interested in how this effect can be achieved.
Anyone got a hint or an idea?
I think this can be done with next steps:
1) Take image that you want to mosaic
2) Read it pixel data colors
3) Calculate average colors based on tile size
4) Draw tiles with average color on new image
5) Display new image
6) Change tile size and repeat from step 2)
I think this scenario with using CoreGraphics will have performance problems.
Another choice - use awesome GPUImage and GPUImageMosaicFilter. Check sample code - it have GPUImageMosaicFilter implemented.

Xcode SpriteKit Designer Clear Background Red X

I'm not sure what the issue is, but I'm trying to design a level in Apple's Sprite Kit editor, and I'm running into a problem with SKSpriteNodes that have a transparent background. Sometimes the background doesn't appear as clear. Instead, SpriteKit seems to load a Red X as a background image.
Naturally, I can't have this. Also, it's a problem because I really should be doing all of the level design in the editor instead of manually adding sprites in my Scene code.
Has anyone come across this problem? Could it be a bug in SpriteKit Designer? (There are a number of issues I've had with it since starting to use the tool).
Here is a photo of what it looks like:
I found a kinda hacky way to solve it. Basically, as uchuugaka said, the Red X appears when Sprite Kit fails to load a texture. If you want a clear background, you have to load a clear png file as the background of the sprite. There is no "No Texture" option currently available in the Sprite Kit designer.
Take these steps.
1.) Open any .png file with some transparency in it.
2.) Copy an arbitrary rectangular section of pixels.
3.) Create a new file with said arbitrary pixels.
4.) Save this file as your "clear.png" and import it into your project.
5.) Click on the sprite node with the Big Red X so you can see its setting. Take a screenshot of its position, size, etc. using preview. These settings will get erased when you swap the texture over to clear.png
6.) Swap the texture to clear.png
7.) Re-enter the sprite settings from your screenshot.
8.) Because SpriteKit Editor is currently horribly terribly flawed (see post above), you will need to reset your sprite's physics properites. Set the physics body to none. Then set it to bounding box or circle or alpha mask or whatever you had earlier.
9.) I hope you remembered your collision mask, category mask, and other physics body properties because they just got reset to the default. Re-enter what you had earlier or you will get a very unexpected result.

Resources