Scott Ruttencutter – Madison, WI iPhone Developer and Creative Technologist

Category Archives: iOS

Scrolling Support in Muir – Mobile Browser Testing

Posted on by

I’ve had great feedback from a lot of people over the Muir launch this past month, with one resounding question that we honestly didn’t have a good solution for until today.

Does Muir Support Synchronized Scrolling?

Synchronizing scroll position across mobile devices is a tough proposition, because with responsive design, it is completely possible that a design that fits on your desktop screen with no scrolling might be several pages long when the content is flowed to fit on a responsive layout.

The recommendation that I see from most inquiries is:

Why not have all devices scroll to the same position as I touch them?

Another good question. The most obvious answer is to move the mobile clients when you scroll in your desktop or mobile browser. Difficult, but possible with a complex javascript library that communicates to connected clients. We tried it, it sucked.

Want to see the header or footer, no problem–scroll to the top or bottom. The trouble is in the middle. It is near impossible to have things scroll to the same position on the page so you can see an element in the center of the page. It just won’t work. (Know how? Show me a good solution!)

Our recommendation for scrolling support in Muir

USE ANCHOR TAGS!

Yep. Anchor tags. Muir synchronizes your browsing experience across devices whenever the URL changes in Chrome or Firefox. This includes any time an anchor is visited. We have found in our development process that when we want to scroll all of our devices, it is to continually test a certain area of the page to make sure it is rendering properly everywhere.

It’s not too hard to add a simple anchor named #muir and then include that in our test URL in Firefox when we want to bump down to a specific part of the page for continuous testing of pesky html or css rendering on a device.

Simple, yes, but it works. Right now, it’s probably the best option to get you where you want to be on the page consistently. You can use the same anchor and just move it around in your code, or set up development anchors as part of your standard process. One of our designers labels each section of a design as #sec_1 through #sec_x and knows that every major div he can iterate the section anchor in his test url to jump down to that section on devices.

So far, it works great.

Thoughts?

Developing an Alternative to Adobe Edge Inspect

Posted on by

Adobe Edge Inspect and Creative Cloud
Last year I downloaded a tool from Adobe originally codenamed Adobe Shadow, which was a free desktop+mobile app that provided mobile device browser testing for mobile web developers. I used it quite a bit while it was in beta for synchronizing sites I was developing across multiple devices to test responsiveness on tablet and mobile screen formats, it was a great tool for me.

When Adobe Edge Inspect was unveiled at the end of 2012 if you wanted to test on more than one device, you are now required to have an Creative Cloud subscription at $9.99 per month for the single app, or a minimum of $50/monthly for the full Adobe suite. Having just spent thousands upon thousands of dollars upgrading Adobe licenses at our studio to CS6 Master Collection, it was disappointing to be left with a crippled application unless we wanted to sign up for a “Creative Cloud Subscription” in addition to our licenses.

 

We Decided To Create An Alternative
At we develop a good number of web/mobile applications and websites in a year. Being a 50/50 creative and developer balanced shop there are plenty of us here that enjoy a challenge, so we sat down to evaluate our options.

Within a couple of weeks we had a rough prototype running that would connect our desktop machines to an iPhone and an Android based client, and could send browsing requests out from the desktop to the mobile clients. Success!

 

It Is A Good Thing We Did – Mobile Rendering Revealed
We quickly realized there were some key limitations to the Edge Inspect tool as we began to investigate what mobile browsers Adobe was using for mobile rendering on devices.

On iOS devices, the only browser you are going to be able to get to handle web page rendering without jailbreaking your device is mobile safari. So no problems there for realistic render tests.

On Android, we discovered that Adobe was using a proprietary build of WebKit that they engineered to work on their Adobe Air development platform. That means, while you are getting correct media query responses for screen size in your css, your pages aren’t actually rendering in mobile chrome, or any other native Android browser.

This is something that we’ve addressed in our new tool, and developers will have the ability to set their default browser on Android devices to be able to test how a modern Android browser will actually render their pages.

 

So What Does Our App Do?
Instead of replicating the functionality of Edge Inspect, we decided to focus on creating a tool that was geared only towards previewing accurately rendered mobile pages. In our experience, it is much faster to edit native css and html files and publish to testing servers or our local web servers vs dig through inspection interfaces to tweak properties and then migrate the working fixes back to our css.

We have a simple desktop application that will connect to our mobile app on your devices. The mobile devices can be kept alive so their screens won’t sleep while you are testing. And you can drive the pages that are displayed on your devices through our desktop interface, or by installing plugins for both Chrome and Firefox to synchronize your devices as you browse.

We’ve also created a plugin for Panic’s Coda (since I enjoy using it), that will update your devices when you save or publish files to your server.

So far it has been a pleasure to build, and focusing on a very limited set of features has allowed us to polish the browsing speed and fit and finish of the apps. I hope when they are ready for release that you check them out and can enjoy them.

 

Available Platforms
For the desktop application, we have created installs for both Windows and Mac OSX, and plugins that work with Chrome and Firefox on both platforms.

For mobile clients, we have developed for the standard iOS and Android devices, ad we have created builds that will be available in the Amazon app store for Kindle Fire devices, as well as on the Nook Marketplace for Nook HD devices.

 

Release Date
As of the time of this posting, I expect that we will have final builds submitted and reviewed by Apple within the next few weeks, launching early September 2013.

 

Other tools out there you should check out
Many of the developers I know have eagerly moved away from Dreamweaver as an IDE and file manager, to Panic’s Coda suite, or to MacRabbit’s Espresso.

Designers I have seen gravitate towards Bohemian Coding’s Sketch, which is a fantastic app for graphic designers working with vectors.

I would love to know of any other alternative tools you enjoy using instead of the traditional Adobe Creative Suite apps, it looks like a lot of people have been busy filling the void that Adobe has left in selling software.

How To Bring A New Mobile App To Market Quickly.

Posted on by

I work with a lot of clients on a daily basis to bring their applications and ideas for interactive experiences to life. Over the years, I have found a methodology that allows us to focus our efforts in a way that is ideal for getting relevant applications to market quickly, and also gives our clients the flexibility to iterate and grow their applications as their customers react.

Focus On A Challenge
Great applications and experiences solve a problem for their audience. A product configuration app makes it easier to make choices. An app built to make a blog mobile friendly makes it easier to absorb content on the move. Whatever you are doing, make sure that you are solving a relevant problem for your audience. Solve a problem, and you will earn new customers and spread your app/service via word of mouth.

Wireframe and Paper Prototype
Before we start any development, and after we identify challenges that need solutions, we start organizing our ideas into rough wireframes. Wireframes are simple sketches of app interfaces with notes about functionality, and help us figure out how we are going to make use of available space, organize our applications, and see how things start to come together. Wireframes allow us to rapidly iterate through user interfaces without worrying about polishing design or building anything in Xcode. It saves time over iterating through photoshop or actual code because when you are making progress you throw a lot away. Save yourself the headaches.

After you feel good about your wireframes, use the same methodology to build paper prototypes of your apps. Using notecards labeled #1 – #x sketch out your basic UI, and for each button mark what notecard you jump to when clicking. It is a great way to walk people through the app who were not part of the planning process to see if they understand what they are seeing. If you’ve missed something in your planning, this is a great way to find it.

Build The Fundamentals – Take Small Bites
With any development project, there is an urge to plan every detail and build “the perfect app.” If you have an unlimited budget, no launch timeframe, and a client willing to work with you for a year or two to get to market, that’s a great way to do it.

If, however, you are trying to prove an idea, gather feedback from your customers, and grow your app organically, then consider limiting your focus. Look at your wish list of features and select the items that your app can not live without. Trim all the “it would be nice if” features and focus on the items that can not be sacrificed. Do this, and you can focus on the core of your application and getting it to market.

Release
When you are ready with an early beta, get it in front of prospective customers. Use a service like TestFlight to put it out there and gather feedback. Early adopters talk about the new things they get to experience before anybody else. Take their feedback, filter what they have to say into a list of items that will solve problems or correct key omissions. Resist the urge to add features at this stage, and once you have a stable application, Release It.

Respond To Your Market – Iterate
The nature of the market is now centered around getting an app out, and iterating. Updates become reminders of your existence, and new features highlighted in updates generate interest and word-of-mouth “buzz”. It’s no longer about creating a giant feature list, building for a year, launching and moving on. iOS app development is about creating the essential functionality of an app first, then endlessly polishing and adding relevant utility.

As you hear from your customers about what they want, that is the time to prioritize your internal wish list, add features desired by the general community, and grow.

Use Metrics. Learn.
If possible, one key item that you should make sure to add is non-intrusive, and non-tracking, analytics. There is a great API for Google Analytics available for iOS (and for web-based apps). Used responsibly, you can track when your customers are using your app, what features they are using most, and what errors they are receiving. This kind of feedback is invaluable when it comes to figuring out how people are interacting with you, and may give you a different picture of usage than you get from your more vocal users.

Do It Again
This methodology will allow you to get a concept to market quickly, test its viability in the case of an application for sale, and evaluate whether or not you want to invest more in your application to help it grow. If nothing else you’ve learned something from the experience, and have something under your belt with which to base more concepts or pitch as a future project.

A Few Of My Favorite Tools

Posted on by
Over the last year of working on the iOS platform, I have found myself with an unexpected arsenal of tools and apps that help me do my job better and faster.  Check these out, and please suggest your favorite apps!

 

Dev & Design Apps

These apps and systems represent the core of the 3rd party apps that I Need to have around to save time during our development processes here at IQ Foundry.  On the design side, having tools to help with building sprite sheets, font glyph sheets, and particle previews is fantastic.

 

Zwoptex
Zwoptex is my favorite tool for working with sprite sheets and cocos2d.  It has streamlined my sprite sheet production, and made it very quick to update entire sheets as I need them.

http://www.zwoptexapp.com/ $15.00 (And Worth It) 

A lot of folks like TexturePacker from code’n'web as well, so I would encourage you to try both!

 

GlyphDesigner

For a long time I struggled with Hiero for creating fon
t sprite sheets for cocos2d.  It was the defacto default tool for bitmap fonts on many platforms.  The guys over at 71squared saw a need, and filled it with a fantastic application that needs no competition (really, it’s good).  You can use basically any system font, customize shadows, fills, outlines, and make things look very close to what that designer wanted you to implement in those Photoshop mocks.

http://glyphdesigner.71squared.com $29.99 (Yes, Buy This and save yourself some headache)


ParticleDesigner

In addition to GlyphDesigner, the 71squared guys also put out a great particle emitter tool to manipulate settings and configurations for designing particles!  It’s very much geared towards cocos2d and their particle system, and a ton of fun to play with.  And it’s useful too!

http://particledesigner.71squared.com/ $7.99 (One heck of a bargain)


TestFlight

One of the hardest things to manage as a developer has been distributing beta builds and gathering crash reports.  The guys over at TestFlight have got this covered.  And it’s free.  Free? Free until they start a pro version with additional features for a fee, but still–I think a lot of indie devs would be lost or crippled without this tool around anymore.  It is pretty quick and easy to get set up–both for the developer and for the end-users testing your apps.  If you are doing beta releases of your titles, this is the platform to manage it with.

https://testflightapp.com – Free?  Free!

 

Business Apps

At the end of the day, numbers matter.  Both knowing what is coming in, but also knowing who is looking at your apps and possibly purchasing them!

AppViz2

This was one of the first apps I grabbed as soon as I realized how limited, and generally uninformative, iTunes Connect was for app developers.  It is fantastic to be able to get an overall historical view of how your apps are doing inside the App Store, as well as see how they are doing financially each morning (or whenever the updates are ready from iTunes Connect).

The crew over at idea swarm is very on top of supporting this app and making updates available when Apple changes their site structure, so I’ve always been pleasantly surprised that any time Apple changes something and breaks stat apps that AppViz is quickly updated.

My only complaint is that I can tell each hour when AppViz is updating because my normally quiet laptop turns on its fans as the cpu’s heat up processing all the data.


Google Analytics


App Statistics are powerful.  Use Them.  For a long time we’ve always built Google Analytics into our web applications and Flash based games.  It gave us a picture of where our visitors were coming from, how they were using our applications, and how we could better tune experiences to maximize customer experience and profitability!  Most of the developers I talk to put no Analytics into their applications to measure usage, effectiveness of advertising in app, or general performance of their game beyond looking at purchase data from iTunes Connect.
Get in the habit of integrating Analytics into your apps and also in your websites!  Knowing where potential customers are coming from and how often they are using your games can give you some real insight on how to spread the adoption of your app within the world.  Plus they have an iOS API now that you can use to more easily send stats out, so there is no longer an excuse.

Linkshare

This may be a little known trick, but there is a great way to get from a 30/70 split to a 25/75% split with Apple on your app sales.  And that is by promoting the heck out of it using links that pass through your own LinkShare affiliate account.  If you have a business tax ID, a company website (you do sell apps, right?), and some time to get things set up and learn their system–this is a fantastic way to make just a little more each month.

 

Things I Haven’t Tried Yet, But Am Curious About.

AppFigures.com
They have the coolest charts and graphs!  Really!  The Coolest!  I just signed up for an account yesterday, and look forward to seeing how this stacks up against AppViz2.  All of the really great Numbers posts I’ve seen in the last year have been using charts output from AppFigures, so it looks like it gives a great visual overview of how your apps are doing in the marketplace.

Localytics

This is an alternative to Google Analytics that quite a number of folks are talking about.  I’ve never used it, but thought I would stick it in my list of things yet to check out.  It looks like it is free for indies, so give it a shot (or give me your feedback below!)

 

What about you?

Are there any apps that you feel I have missed that should be on this list?  Let me know, and I will add them!  I would love to learn more about other tools out there that I haven’t seen yet, so please feel free to continue the discussion below.

5 Easy Steps to get the Attention of an Employer–And Start a Career.

Posted on by

By the time I am done writing this post, I will have put in more effort than most job seekers invest in a single application during their job search. That disappoints me. There are so many simple things that you can do when applying to join a company that will make you stand out from the crowd.  I would like to share my perspective, and hopefully inspire some thoughtful individuals to invest in themselves and start the process of building a fulfilling career.

Let me tell you a little bit about my company, and why our approach to hiring, being part of a team, and working with clients is so much different than most places. IQ Foundry is a small Interactive studio based in Madison, WI, and we do everything from web application development to iOS work (the fun stuff).  We work with a lot of big businesses, doing really hard things, and thrive on the challenges that our clients put in front of us.  These opportunities are earned because we care deeply about what we do, and our clients truly matter to us in a way that goes beyond “just business”.  At the end of the day, we are a team that people can and do count on–and that is what makes us different.  This is all possible because of a philosophy we have here of hiring team members with aptitude and drive to work at a small business who want to contribute, and benefit, in ways that you just won’t see at your average faceless corporation.

I have seen some great people apply the following steps to their career search, and emerge from the other side of this process with confidence in their career path.  This approach is not for everybody–but everybody I know that shares this approach with me find themselves with the luxury to choose between opportunities, and always find themselves valued and needed by the teams that they work with.


Step 1: Know the difference between a Job and a Career.

A job is a place where you work for a paycheck.  Period.  You gain skills valuable to your employer to get fairly specific tasks accomplished over and over again.  You don’t grow at a job, you change jobs to make more money working a different job in a different place.

A true career is an opportunity to contribute to an organization that invests in its people, and its people invest in bettering themselves.  You do hard work, get in over your head, solve problems, and grow.  A great career at a great company can take you from entry level to a senior lead position as you grow your skills and learn the business. You get paid, too, and in the long term I believe firmly that the rewards are more than financial and that the satisfaction that I see people find when developing their careers can beat any job.

If you are unemployed, get a job–but desperately strive to find a career you can love.

There is one major caveat.  You can never stop learning and growing.  In order to thrive in and grow a career, you have to invest heavily in yourself and building your arsenal of capabilities.  I spent the first 5 years of establishing my career devouring books, working on personal applications to build skills, and making sure I was always in over my head.  I loved it, but since this is my passion–it didn’t feel like Work. Career and passion go together hand in hand–make sure you love what you are doing.


Step 2: Find companies you would like to work for, and figure out how you can contribute to their organization.

This is the step that everybody skips.  If you want something more, I implore you to invest heavily in your career search.  Too many new graduates, and too many job-bound professionals waste their efforts by mindlessly sending the same cover letter and resume to every job listing they stumble upon.  If you apply to a position and the only sentence in your email is “Please consider me for the Application Developer Position,” you lose.  If you are only changing the name of the company and the position title, you lose.  Do not pass go, do not collect $200.  Why did you waste your time, or my time, by sending this worthless email to me? (All of the people spamming craigslist and Monster/Dice with resumes have been doing so for the last 12 months, I have the applications to prove it.  They aren’t getting anywhere.)

You are better off spending 20 hours crafting the Right portfolio and genuine introduction letter for a company that you would Love to work with.

Really?

Really.

Looking back, all of the people that we’ve invited to join our team here at IQ Wrote a sincere letter of introduction just for us.  They spent time researching the work that we do, and in interviews were able to talk about our work and ask us questions about our workflow and processes.  Most people identified with wanting to be at a smaller place, they put together samples of work that were relevant to us, and they talked about their goals in building a career and what they could bring to our team.  Some people even have gone so far as to build specific web sites and custom portfolios just for us that show us how their past experiences can be relevant to the type of work that we do.  (Heck, that’s how we win business–it works.)

Some even introduced themselves without a relevant job listing posted, and opened a dialog about wanting to establish a career in this arena, and the skills and drive they could bring to our team.  This is the kind of proactive attitude that managers look for when selecting people to help grow a business.

If you really want an opportunity to shine, put yourself out there.  Here is the secret. In every new opportunity,  ask questions and show that you aren’t afraid to embrace what you don’t know.  My best successes in life have come from asking every stupid question that I can dream up in the quest of making sure that I have clarity of an opportunity.  You will be amazed how far you can get by having a genuine interest in what is in front of you, and being willing to do everything within your ability to achieve the best outcome you can.

Communicate your drive, curiosity, and willingness to understand to employers, mean it (It’s easy to spot the fakers), and you can get your foot in the door.


Step 3: When You Interview – Do A Lot Of Interviewing

So many candidates show up to interviews expecting to be grilled.
Very rarely are they prepared to ask questions that will help them evaluate a working environment and how they would fit into the company’s culture.  An interview is a great opportunity to learn how businesses work, how they think, and can help you evaluate how they might contribute to your career.

Here are some things that you can ask to get an idea of what is going on in a company:

  • What areas of the business will I have the opportunity to contribute to?
  • What are your expectations for my skill level, and what kinds of opportunities are available for me to learn new skills?
  • Why did you accept a position here, and do you feel that you’ve been able to grow your career here so far?
  • Where do you feel the company is headed over the next few years? What kinds of opportunities might be available down the road to help the company grow?

It is just as important for you to figure out why you would enjoy working with a team as it is for them to figure out if they would like you to work with them.


Step 4: Follow up–Politely.

If you sent in a great introductory email, give it a week to give somebody some time to read it and consider (some places will wait 4-6 weeks to collect a pile of resumes before they review a single one). If you haven’t heard back feel free to follow up in a positive, friendly, inviting way.  A polite email just asking to confirm if they received your email, and if they have any questions is all you need to send.  If you never hear back, let it go.  It probably isn’t the right fit, but don’t let that stop you from sending in applications to future advertised positions.

If your introduction made a splash and you’ve been lucky enough to get invited in for an interview, make sure that you follow up.  After you say your goodbyes and thank-you’s, assume that the ball is in your court to show that you have a serious interest in the opportunity at hand.  Do not wait to hear back from an interviewer.  If you are really interested in the position, cement that with a thank you email that confirms your confidence in applying your skills to help solve their problems.  If you really don’t think it is the right fit for you right now, there is no better way to earn respect by letting your interviewer know that you sincerely appreciate the opportunity to meet with them, but that you are looking for something with more X, Y, or Z.  (Who knows, they might have a different opportunity that might better match your goals–win, win!).  Whatever your feelings, communicate them, and do it soon after your interview–ideally right when you get home.  Your interest level is gauged by this; don’t let an opportunity be lost because you don’t want to look eager.  Those who treat business relationships like poker hands to be won or lost don’t realize that there is more to gained by showing your cards on the table.

At IQ we do our best to follow up with every individual who has shown the courtesy of not filling our inbox with application spam.  It is no fun to tell people they aren’t the right fit, but we try to give advice on portfolio development and other opportunities in the area to look into.  We also try to learn more about their career goals should an opportunity open up that might be a good fit for their interests down the road..  It’s also a great way as an employer to make another point of contact to make sure we didn’t miss something that we might not have seen in an application or portfolio.  It happens.  And if you are lucky enough to receive a call like this from a prospective employer, realize what a great thing feedback is.  Nobody gives it anymore, so show your appreciation.  Over the years I have helped place many folks who weren’t the ideal fit for the position we were trying to fill by connecting them to other business owners.  The people who win all of us over are the ones with optimistic enthusiasm for their work–it does pay off in the long run.


Step 5: Follow through–Like a Professional.

If you are lucky enough to make it through the initial interview process, in the current market you are very lucky.  Use your followup meetings and correspondence to solidify your comfort level with the company, and their comfort level with you.  Make sure you understand the objectives and expectations of your hiring manager, and confirm that your impressions are correct.  If they aren’t, it’s a great opportunity to show how good you are at asking questions and gaining clarity.

Don’t be afraid to walk into an opportunity that is above your head, unless your potential team does not know about it.  Use that as an opportunity to ask smart questions about how you can get up to speed most quickly, and become a contributing member of their team.  You will gain more respect from knowing what you do not know than acting like you know everything.  It saves everybody time if your team has an understanding of the depth of your knowledge so they can best to help you grow and accomplish your goals.

As you build your career, the best thing you can do for yourself is to ask questions.  Figure out what the expectations of the people around you are, and how to best help them reach their goals as well as your own.  Ask what you can do to grow within the company over time, and keep your eyes open for opportunities to help your company grow and achieve new successes. Don’t just keep your head down and get your tasks done.  Get to know the people around you and dig into the culture of your new company.  Embrace new challenges, and enjoy the ride.  Being part of an enthusiastic team is what pushes good to great, and what will help you achieve the best work you have yet to do.


In Summary

I hope this gives you some insight as to what career-minded small businesses look for in new team members, and that it will help you evaluate the kinds of opportunities you would like to look for in your own career.

This approach is not what gets you in the door to begin a new career.  It is a lifelong career philosophy of putting yourself out there, being aware of your limits, and finding people who are willing to help you grow as a person and as a professional.  Not everybody thinks this way, but those that do make terrific, encouraging mentors and collaborators.

By the way, we are currently hiring an entry level, entrepreneurial, iOS/application developer type.  If you are looking for a place to build a career, I hope I can inspire you to reach out and get in touch.

Creating Dynamic Scaling Menu Interfaces in cocos2d

Posted on by

In our upcoming iOS title, Haggis (see here for an overview of the game), we are bringing a much loved indie card game to the digital space. I’m going to use the trials and tribulations that my team runs in to on a bi-weekly basis as a series of articles for #iDevBlogADay.

One of our greatest challenges on this project has been developing user interfaces that feel at home on both iPad and the iPhone devices in terms of space and interface. What looks great as a pop-up dialog on an iPad is going to seem too big for an iPhone and feel better as a full screen scrollable summary (especially when we are working with Portrait on the iPad, and Landscape on the iPhone). One approach is to just cram the same interfaces everywhere, which in many cases can work. Our design methodology at IQ Games is to distill interfaces down to the information that the user needs, and then develop a presentation layer that feels at home on each device. Sometimes it is more work, involves different art and assets for both devices, but at the end of the day leaves us with titles that feel at home in both places, as opposed to skewed to work great on one device and leaving the other resolution short changed.

So with that long intro aside, here is our approach to building scaling interfaces for our interstitial “Hand Over” and “Game Over” interfaces that provide information to our users within Haggis.

 

Getting Started – Wireframing

When we start working on any interface, we always start with paper and black/white graphic wire framing. It helps get all of the thoughts out where they can be poked and prodded and massaged without wasting time building and tinkering in final pixels. Here is where we started with our Hand Over screen:

Notice that this looks like a reasonable screen with a lot of information to present. It is–sometimes.

 

 

 

 

 

What happens when there is less content?

When you are only in a 2 player game, nobody has made any bets, and you are dealing with much less information, here is what you might see in terms of space and the information that needs displayed.

 

 

 

 

 

 

 

 

Deciding to Scale our Interfaces

Our rationale for moving towards a scaleable interface was that in a given game, you are going to either need all or none of the space available in the “Completely Full” hand over menu. For a two player game, there is a lot of boring dead space.

Our ideal interfaces would scale around the content available, and therefore with the least amount of possible information look like this.

You may first be asking–why do we care?

The full size interface works, right? Sure, it does. But on the iPhone, dead scrollable space in a full screen interface is annoying, and puts less useful information in front of the user. And since we are going to go through all this trouble, why not do it for the iPad popup dialogs too? It will be nicer, and we all like nicer.

The next question becomes–great, now how do we make all of this happen with cocos2d? I’m glad you asked.

 

Basic Building Blocks of Scaleable Interfaces

There are two basic scaleable interface methods that you will see a lot in interface development. For elements that need to only grow on one axis, either by growing taller OR wider, you can set up a 3 slice scaling pattern. For elements that need to grow in both axes, then you are looking at a 9 slice scale. Since we know we want to maintain the width of our container, and just modify the height, we are going to go into a basic 3 slice scaling object.

In a 3 slice scale, the outer pieces, our top and bottom caps, are of a fixed dimension. The piece that scales in the center, should be designed in a way that you can easily duplicate it to create the pattern you are looking for–or created in the maximum size you will need to use and then creatively masked to the size you want. I will show you both methods here by the time we are done creating this UI.

 

 

Our Final UI

Once wireframes are complete, our team moves right into designing the final game interfaces.  Having a good wireframe to work on lets you focus on design instead of architecture, and tends to make our design teams more successful when executing creative.  Here is a view of our final designs, and an illustration showing how the interface elements will grow and scale with the interface as the data is populated.

The iPad interface will be a popup dialog that the player dismisses by pressing the Continue button at the bottom of the dialog.

The iPhone interface will have a static header with a Continue button fixed to the top right of the interface which is pretty consistent for most iPhone UI.  The remainder of the game statistics will be part of a scrolling area below that header so the user can see the main scores, and scroll to see additional information.  This is where it is really nice to not have all of that extra information.  (The red box in the iPhone interface represents the viewable area of the iPhone screen rotated to portrait.)

 

The Main Container – Scaling by stretching

Our interface layers will begin with the silver frame background that is going to frame the iPad version of our Hand Over interface.  We are going to slice it into three pieces.

The top and bottom pieces of this example will be approximately 56 pixels tall each, and saved into sprite sheets and named accordingly menu_background_top.png and menu_background_bottom.png.

The center segment will be the segment that we are stretching, and here is where the planning and cocos2d fun comes in.  The center slice will be the full width of our background image, which is 400 pixels.  The height will be only 4 pixels, and these four pixels need to be identical in the vertical direction.  Meaning while the pixels may change as they move right to left, everything top to bottom must be an identical column of color.  We are going to use the setScaleY method of the CCSprite object to stretch this block of color to the height we need to pull off our design.

Why 4 pixels?  Well, you could technically do it with 1.  Steffen Itterheim tweeted me to let me know that in some environments there is a 4 or 8 pixel height minimum for textures.  I went with 4.  If you have problems, go with 8.

Code! Well, not a lot, but I’m hoping that if you are looking for a solution like this you’ve got some experience with cocos2d.

Here are the pieces we are working with:

CCSprite *frameTop = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"gamescene_summary_frame_top.png"]];
CCSprite *frameMiddle = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"gamescene_summary_frame_middle.png"]];
CCSprite *frameBottom = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"gamescene_summary_frame_bottom.png"]];
 
[self addChild:frameMiddle];
[self addChild:frameTop];
[self addChild:frameBottom];

This gives us the setup of our components, and the next thing we do is decide how large we want our container to be.  Once we figure out the size we want, we need to set the middle frame to Not antialias it’s texture.  With the texture set to Not antialias (which is helpful when scaling other objects), we calculate the scale multiplier needed to reach our required height, and adjust the scaleY of the frameMiddle object:

int overallTargetHeight = 500;
 
// Determine position of frameTop
int backgroundFrameTopPosition = floor((overallTargetHeight/2) - (frameTop.textureRect.size.height / 2));
[frameTop setPosition:CGPointMake(0, backgroundFrameTopPosition)];
 
// Calculate the size of the middle gap we will need to fill
// (assuming top and bottom textures are the same size)
// We are dividing by 4 because our texture height is 4 pixels
int middleGaptoFillRatio = ceil((overallTargetHeight - (frameTop.textureRect.size.height * 2))/4);
 
// Tell the frameMiddle not to anti-alias, this will cause the texture to be sharp when scaled.
[[frameMiddle] texture] setAliasTexParameters];
 
// Scale the frameMiddle based on our gap math
[frameMiddle] setScaleY:floor(middleGaptoFillRatio)];

This results in a background container that fits within your specified overall target height, and looks sharp doing so.  This is a fairly simple implementation, but in my final UI there will be plenty of code to calculate how much content we will have and the space it will take up.

The Inner Container – Scaling by masking

The dark blue inside container of the Round Summary dialog is actually used in two places.  Right beneath the Round Summary header, and right below that in the Detailed Scoring section.

We put one image of the maximum height we will need for the Detailed Scoring section (because it will be the largest use) and then we implement some neat masking techniques for rectangular masking that are possible since we are using sprite sheets.  We also include a single bar cap to put at the bottom of the image for one instance of the blue background. (The second, larger background area has a rounded cap and will be handled the same way).

 

Rectangular Masking in cocos2d

When using sprite sheets in cocos2d, we have some really handy tricks we can use to implement rectangular masking. Masking of a sprite sheet derived sprite is done by specifying a CGRect that specifies the crop of the larger sprite to take to present your image. Usually this is handled by a sprite sheet generation tool like our favorite here, Zwoptex. This does a great job of making sprites look good, and saves on memory usage.

The side effect is how easily this lets us mask rectangular areas for dynamic interfaces by storing a reference to the original mask, and then using those measurements to substitute our own crop!

// Round Summary Container
CCSprite *roundSummaryBackground = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"gamescene_summary_blue_background.png"]];
 
// Store a reference rectangle of the original size and position of the container rectangle, for redrawing.
CGRect roundSummaryBackgroundReferenceRect = [roundSummaryBackground textureRect];
 
// Create a new rectangle to mask off the rectangle in the size we want (100px)
// We are using the original origin position x/y and background width, but modifying our height
// Be careful not to use a height greater than the size of your texture or you will see pieces of other sprites
CGRect newMaskedRect = CGRectMake(roundSummaryBackgroundReferenceRect.origin.x, roundSummaryBackgroundReferenceRect.origin.y, roundSummaryBackgroundReferenceRect.size.width, 100);
 
// Apply the new texture rectangle to the sprite, and poof, rectangle masked image!
[roundSummaryBackground setTextureRect:newMaskedRect];
 
// Now that we have a masked image, create the bottom cap for our blue stroke border
CCSprite *roundSummaryBottomCap = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"gamescene_summary_blue_top.png"]];
 
[roundSummaryBottomCap setPosition:CGPointMake(0, floor(roundSummaryBackgroundPosition - roundSummaryBackground.textureRect.size.height/2))];

 

Summing it up.

Well, those are just a couple of methods for how to deal with dynamic interfaces in cocos2d. It took me a good deal of time to figure out methods that worked really well, so I hope you can make use of it. If there is a big outpouring for a demo project, I might put one together–but I think most folks who find themselves facing these sorts of problems are probably beyond the basics.

Thanks for tuning in.

Cocos2d – Working with Z Order, How does it work?

Posted on by

Today I solved a problem that I was having with z order properties for sprites in cocos2d.

Coming from a background developing applications for iphelp.com.au, it’s fairly common practice that all display objects are assigned a “Depth” that automatically iterates as children are added to the display list.  So the first element becomes assigned a depth of 0, the second is assigned 1, and the third assigned 2.

So armed with that back history, I looked at the zOrder property of CCSprite.

Ok, I thought, to move something to the first z order within a layer I can just set the zOrder to zero:

[myLayer reorderChild:mySprite z:0];

No dice. I googled, and all of the samples just said “reorderChild to z of 0″.  So either nobody has really done this, or I am missing the boat.

It appears that unless you add the z: parameter when adding a child to a parent, the z defaults to 0.  Moving another object to 0, where it already was, does nothing.

The easiest option to get something behind other elements, is to assign a negative z value below the 0 default:

[myLayer reorderChild:mySprite z:-1];

To move something in front of all other elements, assign a positive z value above the 0 default:

[myLayer reorderChild:mySprite z:1];

I hope this helps.

Paradigm Shift – From Flash to iOS

Posted on by

Well, I’ve moved over to the dark side. Not for my full time studio work, but for our side projects.

Beginning next month IQ is going to start releasing titles on the iOS platform, beginning with a freshly ported version of Germz.

It was a tough decision to make, but the iOS platform represents the caliber of style and polish that we strive to put into our work.

After a month working within Objective-C, I’ve been able to replicate 80% of what we are able to do with Flash, and build a game that runs much much faster than a direct Adobe Air port of our desktop version with the Adobe iPhone packaging platform.

To be fair, much of this is likely due to optimizing code, programming smarter, and reducing sound playback overhead.  For Germz alone, it probably wasn’t necessary to build it in Objective-C, but much like when we set out to build Germz initially it is a great exercise in building a game within a defined genre and figuring out how far we can push details and polish on a new platform.

The other games we’ve been working on went from running at 30+ fps in Air on the desktop to 5 fps on the iPhone.  Again, much of this was due to our taking advantage of the advanced graphic rendering filters and animation tweens in Flash.  Changing our workflow to not use those features wasn’t difficult, but it meant building things in Photoshop and writing .png sequences, which aren’t rendered as fast as animations in Flash.

We had to make a choice, and ultimately I think there is more money to be made for small independent developers who bring a high level of polish and new ideas to the App Store.

Hopefully we can do that.  Wish us luck!