DESIRED EFFECT:
Imagine a UIScrollView such that as you scroll in any direction, you feel like you're looking around inside a dome. As in, the screen is stretched/warped/distorted at the edges by a filter/mesh of some sort. Think of a 3D game where you're looking up at the sky.
WHAT IT'S FOR:
I plan on plastering menu items on a sky of sorts. Imagine looking at the sky where clouds are tappable menu items and there are enough clouds such that you have to scroll around to find them all. This is just a menu to the actual content; it isn't a full 3D game where you can move around and such. I am therefore hoping that I can fake the 3D effect by stretching/warping/distorting the edges of the screen.
WHAT I NEED:
I need to at least know the direction to look in so that I can see how feasible and how much work it will take. If it's too much, I'll unfortunately have to do something else.
From what I've looked at so far, it appears that QuartzCore isn't enough and I suspect that OpenGL is the only way to do it. Before I throw myself into OpenGL though (I'm a complete noob at it), I'd like to know if that's even the correct technology that I should be looking at. And if it is, what area of it I should be looking at (initial searches indicated stuff like texture warping might be what I'm looking for?).
Thanks!
You’re on the right track. You’ll want to use OpenGL ES for this. The basic idea behind this that I’ve seen used to great effect is to project the scene on the inside of a cube, rotating the cube when the user moves their finger. This book really helped me when I got started with OpenGL.
Related
How would I make a scrolling pseudo 3d floor like in street fighter 2 in XNA(or more specifically MonoGame)?
https://gyazo.com/ea78954a5d96c3cb522eeac4a6ee5f21
for reference, if you aren't aware what I'm talking about. I Understand the concept of how it was done on the SNES(moving each line of the sprite separately) but how could I achieve the same effect in XNA with today's technology and libraries?
What you need is a simple ViewPort.
A ViewPort basically shows only a little scene from an overall bigger Picture. Like you have it in sides crollers or RPGs. You only see the current scene and not the complete Level/World.
An implementation example can be found here:
http://community.monogame.net/t/simple-2d-camera/9135
It might be a bit tricky to understand everything at the beginning, but at the end you can reuse this for almost any 2D game and several effects (camera shake, Rotation and so on) so it's worth the effort,
I'm trying to develop a platform game similar to Geometry Dash but i'm facing a lot of problems during the making of the algorithm.
I don't barely know how to proceed. Are the levels structured with a long image ( that is the ground) with obstacles added, or there are many obstacles generated progressively during the game?
I'd like to know where to start from, what to draw and how to place it in my game, how to build the collision detection.
The game will be an auto-scrolling platformer, so, will the character's asset be moving right or will all the level except for the character be moving left?
I'm a beginner, so i would like to receive detailed answers and not too difficult to understand. Thank you.
if you have any advice I would gladly listen to it.
I've done all corona tutorials but they doesn't explain how to do a platformer. - Luca Pasini
Looks like you still don't feel how game work from inside. Tutorials probably will not help you much. I think you need to start something very simple by your own - not by tutorials.
For example:
Show red rectangle
Show blue recatngle
Tap on the screen and red rectangle must change his position (not by transitions - just by core x,y change)
If they are collide - show text: "You win". Collision check just by raw calculations.
Then go with updates, that will make it looks more like a game.
A Little Background
My son Seth has a Lazy Eye and there is evidence that his condition can be improved by playing video games.
Tetris Video Game Helps Treat Lazy Eye
Basically he has poor focus in one eye and perfect focus in the other eye. Over time his brain has started the process of shutting off and ignoring the bad eye. He wears a contact now to correct the focus issue but, his brain is still in the habit of ignoring that eye.
So not just any game will work. He needs something that forces his eyes to collaborate to bring together and track images.
I can use Durovis Dive or Google Cardboard to separate the images he will be processing.
He is a fan of Flappy Bird so a clone of this would be a good start.
My thought is to have the bird visible only to his left eye and the pipes only visible to his right eye. The background is visible to both eyes to give his brain a reference to bring the images together.
So Here is the actual question
I have ran into an issue trying to get a scrolling background and scrolling pipes working in two screens that clip at the right point.
How can I create a screen like below that
The background scrolls in sync in both windows?
The pipes clip at the center?
Thanks!
A crop node (or two) might do the trick so that it masks out the other half of the screen.
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've just cloned the three.js project from github. I'm interested in creating a circle on a 2d plane that I can drag with my mouse. I have no experience in graphics programming (WebGL or OpenGL).
Can someone please point me in the right direction? I've tried google, but the examples seem too complicated.
Many thanks in advance,
I think this is something you need to have a go at. It's not nearly as complicated as you might think. If the maths are scaring you off, don't worry three.js handles it all for you, you just need to add a camera, some shapes and ask it to render them.
Please do take the time to go through aerotwists three js tutorials as these will give you a good grounding in how to setup a basic scene.
You will quickly realise that once you have a scene you can change objects quite easily using your current scene.
As for dragging things around, I'm sure that will come just try to walk before you can run.