How to make good looking custom ui in mobile and tablet devices? - iphone

I'm looking for an intro into designing and making a custom and dynamic UI on mobile specific platforms. As I understand Nokia(Qt), Android, and iOS all use OpenGL ES (2.0?). I haven't looked into Windows phone 7 yet so not sure what that uses. So I think OpenGL would be a pretty good place to start. While OpenGL is mostly about 3D, I'm also open to 2d ways of creating dynamic UI.
I've never really been big on designing interfaces or coming up with cool concepts but now I have an idea for a mobile app that really needs a good looking user-interface. It's sort of a half app, half game type of thing. It really targets people in the gaming community who I think are used to a bit more polish and advanced UI. I could still probably get away with a simple UI(simple not being a bad thing) but I think I at least should learn some design techniques for future reference.
Of course I realise that excessive eye candy which hurts usability, like bloated graphics that slow down the mobile, are of no use at all. I'm trying to make a sleek UI that while looking good allows the user to interact well with the app effectively.
Any suggestions, resources, experience you can share would be most helpful.
EDIT: While I'm looking for ways to use 3D graphics, I'm more concerned with how to come up with a sleek UI in a mobile. I come from a mostly web developer background, with some experience in Photoshop(CSS is the furthest I've gone in designing). I have never really had to design a dynamic interface that reacted to touch and moved all around the screen with some laws of physics attached. There are lots of such effects, such as the carousal effect, which gives the user an enhanced experience. I have no idea how to incorporate these effects into a mobile device. For example, one of the things I need this app to do is take a glassy circular object(a button) that moves around, then turn it into a sort of convex glass lens so it's sort of zooming in on the image underneath to make it look like its actually a magnifying glass. I looked around and this effect is created by a "grid warp" or a "mesh warp". Suffice it to say I have no idea how to do it.

This will help you not only with Windows Phone 7. WP7 uses DirectX 9, but not directly, you must pick XNA or Silverlight(no other options). Also these blog posts I find quite usefull.
For game, game related app I would stick to one design, and as you said start with OpenGL.

I have been searching since yesterday and thought I'd add some links for anyone interested.
Although I'm dividing them up by the platform the articles refer to, with some elbow grease the ideas should be cross-platform compatible.
Qt
Carousal animation in Qt
Shadow effect Qt
Qt Kinetic Scrolling describes kinetic scrolling algorithm in Qt(self descriptive really)
Qt OpenGL Nehe tutorials converted to the Qt environment
Iphone
OpenGL from the ground up - expansive list
Flow Cover tutorial.
Android
Android 3d Tutorial
Another Android OpenGL tutorial
Yet another Android OpenGl ES tutorial, seems people have gone open-source mad.
Custom UI on Android
One finger zoom tutorial at Sony Ericsson Developer World
3D list at Sony Ericsson Developer World
OpenGl/ES
OpenGl tutorials at NeHe, there are tons, I read through the first one (on light) and it was really informative.
TheRedBook intro to OpenGl
Books
Books list at Design4Mobile, these do not cover the technical side rather covers the things to keep in mind when designing mobiles, I think the O'Rielly one should be pretty good.
Inspiration
10 beautifully designed Iphone Apps - for a touch of inspiration
All rounder
Mobile TutsPlus sort of a gathering of tutorials for android and iPhone
That's I found in the last four or five hours, as I find more I'll add it on. I've also made this a community Wiki so others can correct any mistakes I've made here, or to add anything they feel relevant.

Related

High Graphics 3D Game Development for iPhone

I have good experience with the iPhone development tools and making apps with window based applications and stuff. I am now trying to make an awesome 3D game, which is an area I have never tried out.
I am very interested in learning about the development of "INFINITY BLADE" and I am very curious to know how it was developed and how they were able to develop it with so much detail.
I had already looked at links like iPhone 3D Engines, but it seems outdated.
Where is a good place to start for learning HIGH Performance 3D games for iPhone / iPad ?
Could you share any tips on the development life cycle for the 3D Games ??
Tools used for making high quality 3D images for the creative side of iPhone Development ? And resources on the creative side ?
Could you share the game development life cycle for a particular app , or perhaps your comments on the development of Infinity Blade ?
This isn't a full answer, but I decided to post it anyways.
Infinity blade was written using unreal engine 3, which recently (or not so recently) got an export to iPhone option. Unreal engine is the same engine used for games such as gears of war. I'm assuming that the actual difficulty of getting high quality graphics to run well on the iPhone was handled by unreal engine. As for making the graphics, I'm sure they hired a (bunch of) 3D artists. You can get the UDK for unreal off of their website, which allows you to start learning with it. The only caveat is the cost of the engine when you actually want to release a game.
I've never actually used it so I can't give too much information on it, but you could try looking at cocos2d's lesser known sibling, cocos3d. That would probably be the most cost effective way to learn how to do some 3d game programming in obj-c.
http://brenwill.com/cocos3d/
But if you're looking to bang a game out quickly and learn a good amount about game development, Unity3D might be the best option. They have a few really good hands on tutorials.
http://unity3d.com/support/resources/tutorials/
I might be wrong, but I think Unity might require the use of C# under mono, in which case I'm not sure if that would be something you're looking for.

Unity 3D vs. UDK 3 for iOS

I have a couple ideas for some 3D games/apps and need to know which 3D engine to go with. I like the high-level approach of Unity and UDK. I have done some 2D games using cocos2d before, but I'm entirely new to the 3D world, which is why i think Unity or UDK are a good choice. I know about the differences in licensing, and i am more concerned with the learning curve instead of the licensing cost.
Plans:
A 3D "side scroller" that goes forwards (up) instead of to the side. Third person space ship. This would primarily be for learning. Tilt to steer, tap to jump. Very simple graphics, vertex coloring would be enough.
A 2.5D "side scroller" like the above one but with a car. This game would generate the levels randomly out of a couple prefab blocks of a certain length that fit together seamlessly.
A 3D augmented reality display for pilots with a terrain mesh loaded from DEM data. Accelerometer and GPS access required.
Other important points:
Must be able to tie in to In-App purchases.
The more community content like tutorials and forums the better.
Ability to add third party libraries like Flurry Analytics is a big plus! But i guess this isn't possible?
Which engine would you recommend for these projects, and why? Preferably, i'd like to pick one and stick with it.
You’re going to have a way, way better time developing with Unity. UDK’s got a fantastic, incredibly capable engine, but its tools don’t have the ease-of-use of Unity’s, its developer documentation leaves a lot to be desired, and the community hasn’t been using it for long enough for there to be much help to be found there. Some quick Googling suggests you can write your own Objective-C plug-ins for Unity games, so in-app purchases and third-party libraries are definitely a possibility. I think Unity’s your best bet.
What about cryengine? it free for non commercial use and also provides mono c#.
Check it out CryEngine

OpenGL ES and Default iPhone UI components

So I am rather experienced with OpenGL on the desktop platform and am trying to integrate it with my iOS development experience. I have created several large scale iOS applications so I have a good understanding of that process as well. I was wondering if anyone knows of any useful techniques to integrate iOS UI components with an OpenGL scene, or if that is even possible. I apologize if this is to general. I can refine it if necessary.
For example, say you have an iPad application that has a table and whatnot on the left, and you want to add a little 3D OpenGL window on the right. (Perhaps a chart or something that the user can interact with?) This would not be for a game or anything, but more for my understanding on how to smoothly integrate the different platforms. Any advice or links that the community could provide would be greatly appreciated. Thanks in advance!
GL-Views do not have to cover the entire screen. A great and very easy to understand example is the sound=recorder SpeakHere iphone app within the iOS SDK.
This example uses a small GL-View for displaying a peak-level-meter of the audio signal; GLLevelMeter.
Hope this helps...

How to learn OpenGL by example, say, building a rotating globe?

I have two years of experience on iPhone programming but totally new to OpenGL. What should I pick up in order to build a rotating globe on iPhone? What I want to archive:
a 3G globe shown on an iPhone
basically a 3D ball with a texture map on it
when a user drag on the screen, the globe rotates
Thanks
Well if you are completely new to OpenGl like me than I would suggest you to follow this link to get you started
http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-table-of.html
enjoy
Edit:
Try this too
how to replace images in puzzle game
I would recommend Brad Larson's Course on OpenGL (ES). It's available on iTunes (for free):
The videos of the Advanced iPhone
Development class I taught this past
semester at the Madison Area Technical
College are now available for free on
iTunes U. These videos amount to over
35 hours of HD content, covering more
advanced iPhone development topics
such as Core Animation,
multithreading, Quartz 2-D drawing,
and OpenGL ES. The course notes that
accompany the class are available for
download here in VoodooPad format, or
for viewing here in HTML. Links to all
sample applications used for the class
are present in the notes.
Source
Many people would suggest that you try the NeHe Tutorials for OpenGL, and while I do think that they cover a few features of the OpenGL API, I would instead recommend buying a book on OpenGL if you are serious about learning it. Of course, learning how to write programs using OpenGL comes with practice, but reading the books helps you understand how and why the API is designed how it is, and also introduces you to the graphics pipeline, which is crucial in understanding how your function calls are really processed. I would personally recommend the OpenGL Superbible, but I have heard the the Red Book is good as well. Here's a link to a free HTML file containing an older version of the Red Book.

Quartz 2D vs OpenGL ES Learning Curve

I have been developing iPhone Applications for a couple of months. I would like to know your views about the Quartz vs OpenGL ES 1.x or 2.0 learning curve. You can tell your perspective. My Questions are
*I am a wannabe game developer, So is it a good idea to first develop in quartz , then move
on to OpenGL ES or does it not make an difference
*Can you please tell your experiences when you were having the similar question
Thanks :)
Quartz 2D is not applicable for game development IMHO. It is a software rendering API. It won't give you realtime rendering speed. It's good for drawing charts or vector text with shadows, or for blending several images together. Just not for games. Unless you want to make a game where few images are moving against a monochrome background and even in that case I doubt it will be really smooth on older devices. I've seen some games obviously coded with Quartz. A pitiful sight.
Sooner or later you'll end up using Open GL ES or a game framework build on top of it. I recommend you to check cocos2D, SIO2 engine, or examples from SDK.
With careful programming it is possible to make an Open GL ES game with parallax scrolling and relatively small amount of objects work at 60 FPS even on 2nd gen devices. Tiny Wings is an example of such game. And maintaining stable 30 FPS is not a problem at all.
I skipped Quartz and went right to OpenGL ES. I started with a 2D sprite based game. Thought it was pretty easy.
The key is having a good example to look at. I used the Lunar Lander clone (Crash Lander), but I don't think that's easy to find anymore. Maybe someone who has done it recently knows of a better, newer example that uses current best practices.
I'm in the same boat as you describe, although I have no programming background. (Although I don't know what your background is either) Currently, I am in the process of learning to code as I learn the various API's that are available. I'm an objective-c guy going backwards to the c-based Quartz API, and it's a little bit of a challenge. Luckily, Programming in Objective-C 2.0 by S. Kochan has a great chapter on underlying C features to keep you afloat.
I have taken a couple of stabs # OpenGLES, and I have to say, that from a conceptual standpoint, I'm not ready for it. The Quartz2d API is a bit easier to learn conceptually because it's very easy to get up & running with a few commands. Right now, I'm at the point where I can define shapes and point to point images with out too much trouble.
OpenGLES is going to be something in my future, but it takes such an enormous amount of code to configure the drawing view, set up buffers, etc. If you are familiar with everything the code is doing, then it's a bit easier. However, from a learning perspective, Quartz is an easier way to get going, quickly.
Resources I'm using: The aforementioned book, and an anemic amount of blogs containing tutorials, which are limited # best. At this point, make an appointment with the apple docs and get cozy, because it's about the best (free) stuff that's out there (& exhaustive) With that said, I'd love for someone to prove me wrong on this site by posting a great resource for learning, but that's about it. Good Luck.
I have been looking for the fundamental differences so I can decide between OpenGL (ES) or Quartz or a hybrid. The good news is that the hybrid is an option. Clearly Quartz is easier to master for O-O programming and the answer from Apple appears to be that OpenGL, "...is ideal for immersive types of applications..."
http://developer.apple.com/library/ios/#DOCUMENTATION/General/Conceptual/Devpedia-CocoaApp/DrawingModel.html
I don't want to limit the category to games as I believe any game UX can be applied to a business App, a productivity App, entertainment viewing, etc. By the same token, I fully expect the technology (both h/w and s/w) to advance to make either a choice.