I would like to have some text appear and disappear in a puff of smoke effect in an iPhone game. For example, when someone scores points, I want to show the new points that were added. It should appear in a puff of smoke and disappear within a second or two.
How do I create that?
Have a look at Particle Designer from 71 Squared. It costs about $7.99 and includes easy code generation and integration. There are some pre-configured smoke effects available in the shared library.
http://particledesigner.71squared.com
You will most likely have kind of "cheap" effects using particles, but you'll have a good control over the animation (velocity, scaling, acceleration...).
Another way to go is to use multiple images of smoke and overlay them, then launch an UIView animation with random properties for rotating, scaling and timing.
Related
I’ve been developing an iOS app using Swift 4 but recently (today) decided to switch to Flutter/dart after hearing about its capabilities.
In my iOS app, I have a moving background of waves (actual waves when you think of an ocean).
The width of the the wave .png is 1606 units and I animated it in a way where it will translate from right to left 265 units in 1 second, then it repeats itself. This way, the waves are moving continuously when in reality, it’s only a fraction of the entire png repeating itself.
I needed this same background to apply to all ViewControllers (screens) in the app and I did this by sending the last known x value right before the transition through a segue (transition between viewcontrollers, I believe it’s a “route” for dart?) and used this value as the initial position of the waves in the next ViewController. When I swipe up or down, to move to different view controllers, the waves would also move accordingly.
For some reason, the animations were a bit choppy but I’d say 80% of the time, it was perfectly smooth. I need it to be 100% for when I release my app tho.
How would I go about accomplishing this type of animation in Dart?
For animations, Flare seems very promising and I’m kind of steering towards using that to accomplish my goal but I’d like to hear any advice on how I should approach this.
The animation performance depends on how it's implemented. Without a minimal repro, it'll be challenging to figure out the issue. Though other options that you may consider to animate the background is by using AnimatedPositioned widget. Using this should help manipulate the position of widgets displayed on screen.
Another one is by using Adobe After Effects animations and rendering it with lottie plugin on your app.
I have a really cool effect that I like that I made using sks files in xcode and the blend mode 'add'. Now I didn't realize it at the time but after looking at the apple docs I saw that the effect is actually based off the background color, specifically:
Adds the pixel values of the particle and underlying images. Creates a white pixel if this value is greater than 1
Now, I want to have the same effect across every different background color but as far as I know the only way to do that is to use the "Alpha" blend effect. But this only gives me the option of having solid colors. This is the graphics that I want to apply across all different background colors:
How can I go about having this effect across all different background colors? I'm using the default spark particle file.
UPDATE:
I'm leaving this question unanswered until either apple comes up with a way to do what I want or someone else finds a way to do it.
Due to the unique nature of particle systems AND the very limited masking facilities of SpriteKit, I don't think this can be done.
Availability of inversion masking, in an unnested way that's not the clusterfuck of masking in SpriteKit as we currently know it, would instantly solve this problem.
The way to do this, ordinarily without inversion masking, would be to have two instances of the exact same particle system, one acting as a mask to cut out the excess black, one the visual elements you see over the black, that's then composited (as a whole) over your background.
Here's KnightOfDragon suffering with the individuality of particle systems for another use case: Duplicating a particle emitter effect in Sprite Kit
I want to make a 2 player mode, split screen style, like Tiny Wings HD did where each side of an iPad gets a flipped orientation screen of the current Level.
I wanted to also implement it on tvOS (without the flipped orientation) as I feel TV begs for this sort of gameplay as it's pretty classic to have this style of gameplay on TV (e.g. Mario Kart 64 or Goldeneye).
Over on the Apple Developer forum, someone suggested that it could be done as follows, but, there we're no other responses.
"You can have two views attached to the main window (add a subview in your viewcontroller). To both views you can present a copy of the scene. Then you can exchange game data between scenes via singletons."
I was looking for a more in-depth explanation as I don't exactly understand what the answer is saying.
I'd just like to be able to have two cameras both rendering the same scene but one focusing on player 1 and the other player 2.
Obviously this isn't a simple answer, so I don't expect a full in-depth tutorial.
Unfortunately I could find no info on this.
Has anyone tried this?
A sample project would be ideal or some documentation/links that might help.
I'm sure a demonstration of this would be valuable to quite a lot of people.
No Cameras involved or necessary
The players just look like they're moving along the x axis because the backgrounds are scrolling by. You can allow the players to move up & down on the y axis whether jumping, ducking, rolling or following a path like in Tiny Wings, but the player never leaves their x position. You can even have each half of the screen background scrolling at different speeds to represent that one player is moving faster than the other.
In your update method in you scene file you can scroll your backgrounds, and in your touches methods you can jump, duck etc the players
Instead of using an SKView to present an SKScene, you can use SKRenderer and MTKView. SKRenderer renders a scene into a Metal pipeline, which in turn can be presented by an MTView.
Crucially, you can decide if SKRenderer updates the scene, allowing you to render the same scene frame multiple times (possibly using different cameras).
So a pipeline might look like this:
Apple actually talk about this option in Choosing a SpriteKit Scene Renderer. There's also a section about using SKRenderer in Going Beyond 2D with SpriteKit from WWDC17 which is quite helpful. This answer also shows how to use SKRenderer (albeit in Objective-C).
I'm developing a app that will showcase products. One of the features of this app is that you will be able to "rotate" the product, using your finger/Pan-Gesture.
I was thinking in implementing this by taking photos of the product from different angles so when you "drag" the image, all I would have to do is switch the image according. If you drag a little, i switch only 1 image... if you drag a lot, i will switch them in cadence making it look like a movie... but i have a concerns and a probable solution:
Is this "performatic"? Since its a art/museum product showcase, the photos will be quite large in size/definition, and loading/switching when "dragged a lot" might be a problem because it would cause "flickering"... And the solution would be: instead of loading pic-by-pic i would put them all inside one massive sheet, and work through them as if they were a sprite...
Is that a good ideia? Or should I stick with the pic-by-pic rotation?
Edit 1: There`s a complicator: the user will be able to zoom in/out and to rotate the product in any axis (X, Y and Z)...
My personal opinion, I don't think this will work the way you hope or the performance and/or aesthetics will not be what you want.
1) Taking individuals shots that you then try to keyframe to based on touch events won't work well because you will have inevitable inconsistencies in 'framing' the shots such that the playback won't be smooth
2) The best way to do this, I suspect, will be to shoot it with video and shoot it with some sort of rig that allows you to keep the camera fixed while rotating the object
3) I'm pretty sure this is how most 'professional' grade product carousel type presentations work
4) Even then you will have more image frames than you need -- not sure whether you plan to embed the images files in app or download on demand -- but that is also a consideration in terms of how much downsampling you'll need to do to reduce frames/file size
Suggestion
Look at shooting these as video (somewhat like described above) and downsampling and removing excess frames using a video editor. Then you could use AVFoundation for playback and use your gestures to 'scrub' into the video frames. I worked on something like this for HTML playback at a large company and I can assure you it was done with video.
Alternatively, if video won't work for you. Your sprite sheet solution might work (consider using SpriteKit). But then keep in mind what I said about trying to keyframe one off camera shots together -- it just won't work well. Maybe a compromise would be to shoot static images but do so by fixing the camera and rotating the objects at very specific increments. That could work as well I suppose but you will need to be very careful about light and other atmospehrics. It doesn't take much variation at all to be detectable to the human eye causing the whole presentation to seem strange. Good luck.
A coder from my company did something like this before using 360 images of an object and it worked just great but it didn't have zoom. Maybe you could add zoom by adding a pinch gesture recognizer and placing the image view into a scroll view to zoom in on the static image.
This scenario sounds like what you really need is a simple 3D model loader library or write it in OpenGL yourself. But this pan and zoom behavior is really basic when you make that jump to 3D so it should be easy to find lots of examples.
All depends on your situation and time constraints :)
I am confused as to how endless runner games actually work, conceptually, as far as having a never-ending canvas. Sprite Kit is under NDA, so I am going to use Cocos2D as my framework.
There are some tutorials on the web that are specific to other languages, and tools, but I just need to figure out basically: If I create a scene with a specific size, how do I create the illusion of a never-ending background? Do I just animated backgrounds behind the scene, or do I somehow dynamically add length to the scene, so my runner really is running along the canvas?
Do I make sense? I just cannot grasp what the actual method these games use is. They certainly feel like the runner sprite is moving along a canvas, but maybe it's just that he's staying still and all the elements are moving?
One way that you can make the "endless" environment is by making UIViews (or NSViews depending on what platforms your game will be available on) that contain only a section of the environment so they can be reused when the runner passes that part of the game. Each view can be dedicated to display a certain feature of the game such as a power-up or an obstacle and it will be up to the logic of your game to decide when to use each view.
Lets think of endless runner like jetpack joyride.
You might want to have two background nodes, each larger than the screen size by some amount (maybe 1.5 or 2 screen widths).
When you load your level, you load first background and add second background at the coordinates where first ends, so that they form long screen. Then when we start moving character along this background when first background leaves screen we can take it, and change its coordinates to those where second background frame ends. This way when this comes to an end, we do the same with it.
This way only using 2 long images we can simulate essentially endless space.
You can use longer sequences for your game.
You can add other nodes to your background when it has left the screen and present it, so it looks different each time.