Under The BridgeUnder The Bridge

React Nativity

Appropriately enough for 2015, there’s a bit of a “Back to the Future” vibe about the latest excitement in the app development world:

React Native: Bringing modern web techniques to mobile

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere…

This is very exciting indeed, we are breathlessly assured. Seems to strike some chord though … can’t quite place it …

Introducing React Native

… and there’s always something to learn from other frameworks. But if there’s one thing Appcelerator and we as community should learn is that it looks like we have to do a better job at getting the word out. The word that Appcelerator has been doing this for years!

Yes, that was it. And while we’re delighting in curmudgeonry:

React.native isn’t

While we’re on the subject of terminological disasters, Facebook’s react.native seems to be doing a good job of muddling the waters.

While some parts make use of native infrastructure, a lot do not:

  1. uses views as drawing results, rather than as drawing sources, has a
  2. parallel component hierarchy,
  3. ListView isn’t UITableView (and from what I read, can’t be),
  4. even buttons aren’t UIButton instances,
  5. doesn’t use responder chain, but implements something “similar”, and finally,
  6. oh yes, JavaScript

None of this is necessarily bad, but whatever it is, it sure ain’t “native”.

Perhaps despite all this, there is indeed some reason that React Native will displace SDK Native for development in the same fashion that Titanium has not; but we’d bet against it, personally. However, there is significant contrary opinion; here’s some of the more interesting ones, along with some resource links:

Diary of Building an iOS App with React Native

Retrospective on Developing an Application with React Native for the obligatory Wenderlich tutorial

React Native For Beginners – The Next Big Thing?

ReactNative.com has a good spread of news and resource links

React.parts: “A catalog of React components”

Custom Native iOS Views with React Native

React Native Fundamentals

Now, one assertion in the above that is worthy of consideration is that the more functional model of React has its design advantages. But as it happens, there’s a way to experiment with React design that is actually native:

Introducing ComponentKit: Functional and declarative UI on iOS

Building user interfaces for iOS requires lots of imperative code. As a developer, you create views, configure them, and add them to the hierarchy. You then have to implement callbacks to controllers, which in turn must change the state of your views. Implementing this two-way data flow, even for a simple UI, can be tedious and error prone … To tackle this challenge, we wanted a better abstraction. We drew inspiration from React and its functional reactive programming model for building UI and made a native, Objective-C++ library called ComponentKit which is now used to render News Feed in the Facebook iOS app…

And how did that work out?

ComponentKit gave us performance and reliability gains in News Feed UI Rendering and made the system easier to reason about. It allowed us to:

  • Reduce the size of our rendering code by 70%. Manual and intricate layout code was completely removed as it was no longer needed.
  • Significantly improve scroll performance. ComponentKit eliminated many superfluous container views and significantly flattened our view hierarchy. A flatter hierarchy means less time spent on the main thread to render UI.
  • Improve test coverage. ComponentKit made it easy to build modular UI for which each piece can then be tested in isolation. We now have almost all of News Feed UI under test coverage using snapshot tests.

Making News Feed nearly 50% faster on iOS

OK, now this, this intrigues us.

If you want to dive deeper into the details of how ComponentKit works you can check out this article from Adam Ernst or the second half of this @Scale talk by Ari Grant.

Why yes, yes we will give that some very serious consideration. Much more serious than switching to JavaScript!


Wait, now apps using JavaScriptCore have Apple’s blessing to update themselves without review? Maybe there is A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript after all. We’d noted that possibility way back in 2011, and got a little more interested in 2013, so maybe 2015 is finally the right year for it!

Caravel: “A Swift event bus for UIWebView and JS.”

An iOS Developer on React Native

In-Depth Tutorial Series On Building A Mobile App With React Native

Why I’m not a React Native Developer

PaintCode By Numbers

Been waiting patiently for that vector drawing in code PaintCode vs. Android report we promised last year? Well, that kinda wandered off into the weeds. Oops. However, PaintCode continues its relentless march towards ever greater heights of awesomeness in freeing you from PNG tyranny:

PaintCode 2.3 adds 15+ new features, including SVG export

  1. SVG code generation
  2. PDF, AI and EPS import
  3. Completely rebuilt image export
  4. Animated sequence export (“Great for Apple Watch animations!”)
  5. Copy & paste support from Sketch, Illustrator, Pages
  6. Live shape thumbnails in the Shapes & Groups browser
  7. New multithreaded renderer
  8. Support for cut, copy & paste of entire canvases
  9. Support for canvas multi-selection
  10. New way to find out where your library items are used
  11. New, easy way to replace one library item with another
  12. Replace Symbol with its content
  13. Improved PSD and SVG import
  14. Canvas Arrangement
  15. Built-in feedback form

So it’a a better time than ever to check that out. And besides their own excellent tutorials and documentation, there’s an ever growing oeuvre of tips and samples:

A First Project With PaintCode & The Story of Look Up’s Arrow

Create a Resolution Independent iOS8 App and Set Your Images Free

Using PaintCode to Dynamically Create Images in the iOS Football Manager Game Title Challenge

Working With PaintCode And Interface Builder In Xcode

Xcode Live Views: Killing them softly with PaintCode

Responsive iOS Buttons with PaintCode

Increasing The Tap Area Of UIButtons Made With PaintCode

Creating Beautiful iOS Controls with PaintCode

MMScalableVectorView: “Turns static PaintCode or Qwarkee code into a UIView that honors the contentMode property.”

FKRBlockDrawing “is a collection of two classes and one category to make creating artwork in code a lot easier. It’s great in conjunction with PaintCode, where the graphics in the examples project are from.”

Recreating MKUserLocationView is a great walkthrough of how to do a tricky control that highlights the benefits of PaintCode nicely.

And just in case you’re taking this all seriously, here is what we confidently predict is the most chuckle-worthy UISwitch you have ever seen:

A rapid prototype of UISwitch built with Swift and PaintCode


Recreating Apple Watch Activity Rings in PaintCode

Core Graphics, Part 1: In the Beginning and Part 2: Contextually Speaking and Part 3: Lines

PaintCode Tutorial for Designers: Getting Started and PaintCode Tutorial for Developers: Getting Started and PaintCode Tutorial for Developers: Custom Progress Bar

Preview PaintCode images directly in Interface Builder

PaintCode Review: Dynamic Graphics Made Easy

PaintCode Sketch Plugin Tutorial (and Sketch users, check out Sketch App Sources!)

CoreAnimation is pure love

Bring Your App To Life with CALayers: CALayers, Paintcode, and **Animations**

PaintCode: How to Make iOS-Ready App Graphics with Sketch App

Tip: Check Your Layout Privilege

On the off chance you haven’t bothered to read carefully the 8.3 point release notes, having been busy fixing up your broken Swift code and all, there’s a subtle time bomb lurking therein for next time you get it building again:

When linking against iOS 8.3, any code that relies on layout information (such as the frame) of a UIButton subview when the button is not in the window hierarchy will need to send layoutIfNeeded to the button before retrieving layout information (such as button.titleLabel.frame) to ensure that the layout values are up to date.

For example, if you had something like this:

You now need:

Yikes. Not sure if there’s any currently in development, but we’ve certainly used and/or written ourselves many pieces of code of that form that are now problematic. Probably a sound plan to audit all your button-creating code … just in case.

h/t: @sanjeetsuhag via @mariozullo!


Looks like layout’s got some pretty serious under the hood revisions: for instance this example

If you construct layout constraints manually … pass in nil for the second view, and that contradicts the the attribute being specified, you’ll now get an exception. Previous OS releases appear to have quietly ignored this transgression on your code’s part.

So yep, better give all your layout stuff a good checking under 8.3. It’s the only way to be sure.

Adaptability Changes in iOS 8.3

“IB started respecting the “relative to margin” option for constraints starting in 8.3” may explain your cells looking different.

Evolving Swiftly

What, you say reading the title, a followup to “Swiftly Improving” before 1.2 is even final? No, no, because the language is an example of Intelligent Design, not evolution. (At least, we hope, yes?) The now-for-something-completely-different topic of today is the ever so cleverly logoed


Mendel Swift miliframework for implementing evolutionary/genetic algorithms:

The framework provides an Engine protocol, describing the necessary interface for evolutionary/genetic computation using functions. Individual instantiation, population evaluation, selection, genetic operators (like mutation and crossover) and even termination conditions are all described as functions. This allows you to use techniques such as partial application and function composition to a great effect.

Here’s a video showing the sample application that’s build on top of Mendel in action.

Mendel provides a number of canned implementations for some of those functions, see:

Selections for individual selection functions, such as RouletteWheel and StochasticUniversalSampling

Operators for genetic operators, such as Mutation and Crossover

TerminationConditions for termination conditions, such as terminating after a number of iterations (NumberOfIterations) or terminating when a given fitness threshold is reached (FitnessThreshold)…

Even if you’re not fascinated by GA stuff — and who isn’t? — there’s some pretty nifty Swiftiness to take a look at there! And if you are, the background to this project is

Inspired by http://chriscummins.cc/s/genetics/ and the Functional Programming in Swift book. Hat tip to Watchmaker and Nacho Sotos’ swift-genetics.

And if you’re short of initial ideas to run with this; why, what could be more canonical than Genetic algorithm for “Hello World” ?

h/t: @iosgoodies!

Revenge of the ASCII Artist

Now here’s some news most appropriate for April 1st, the best part of the prank being that it’s completely real. Had a look through the resources in our Art For Non-Artists post and still come up short on skills? Well, then, we have just the thing for all of you who cut your teeth back in the Oldskool ASCII art days:

Replacing Photoshop With NSString : “Create UIImage / NSImage instances from NSString, by combining ASCII art and Kindergarten skills.”

…After a while, though, I realized that the most interesting part of the code was actually the ASCII art I was using as a guide to my drawing code: The actual drawing code suddenly seemed superflous. What if I could just pass the ASCII art into NSImage directly?

Xcode does not compile ASCII art, so I decided I would write the necessary ‘ASCII art compiler’ myself. OK, I did not write a compiler, but a small fun project called ‘ASCIImage’! It works on iOS and Mac as a simple UIImage / NSImage category with a couple of factory methods…

So you go from this

to this!

Now that’s some real programmer artistry. Never mind all these newfangled graphic editors, we do our UI with STRINGS, by Knuth.

Check out the rest of the article for algorithm details, notes on layering, and so forth; there’s also a followup with slides. And an editor. (Also note that the apparent be-all end-all of ASCII art editors, Monodraw, offers ASCIImage support if demand warrants.) And a landing page. With links to ports in JavaScript, Node.js, Go, Ruby, C#/WPF, Qt/C++, F#, and Xojo. And then check out the discussions on Hacker News and reddit. Apparently up until now, there has been a crying need for a way to specify vector graphics in ASCII. Who knew?


BKAsciiImage: “Convert any UIImage to ascii art.” Pipe it in and get ASCII autovectorization!

Creating ASCII art in functional Swift

Thrash Metal

Since all you Dear Readers seemed to think our Daft Punk allusion last post was clever, let’s do another music callout this time. Not that it really takes a whole lot of clever to connect up Metal with a particularly extreme genre of such, but hey, it gives us an excuse to link to the thrashiest of thrash bands playing the Duke Nukem theme for your post-reading background music, which we just haven’t done enough of so far.

Any-ways, in case like us you’d pretty much skipped over stuff about Metal figuring it was only of interest to game engine writers, there’s some interesting stuff around that people are doing with it you might like to be aware of. In particular, this FlexMonkey post caught @NatashaTheRobot‘s eye (and if you’re not subscribed to her Swift newsletter, you should be):

Two Million Particles at 25 Frames Per Second on an iPad

Following on from my last post where I managed to calculate and render over 1,000,000 particles in realtime, I’ve done some pretty effective tweaking of the code to create an app that calculates and renders (with blur and trails) over 2,000,000 particles at around 25 frames per second on my iPad Air 2…

Not bad, not bad. Also note followup:

Swarm Chemistry: Creating an Advanced GPU Based Particle System with Metal

…With Metal, I’ve been able to create a kernel shader that can calculate and render 4,096 swarm members at 30fps – so that’s 16,777,216 particle interactions per frame or 503,316,480 particle interactions per second! Pretty impressive stuff for a tablet computer!

Code at FlexMonkey / MetalParticles, with UI described in Adding a User Interface to my Swarm Chemistry App on an iPad

So that’s pretty cool, but still a little niche. A good number of you probably run into need for parallel computation, particularly image processing, not all that rarely though, yes? Start over at Metal-dedicated site Metal By Example and check out these articles:

Introduction to Compute Programming in Metal

This post is an introduction to topics in compute (or data-parallel) programming. It is designed to be read before its companion article, Fundamentals of Image Processing. In this article, we will cover the basics of setting up the compute pipeline and executing kernel functions on large sets of data in parallel…

Fundamentals of Image Processing in Metal

In this post, we will start exploring the world of image processing with the Metal shading language. We will create a framework capable of representing chains of image filters, then write a pair of image filters that will allow us to adjust the saturation and blur of an image. The end result will be an interactive app that allows you to control the image filter parameters in real-time…

Back at FlexMonkey there’s a project FlexMonkey / MetalReactionDiffusion building off that described in these posts:

Metal Kernel Functions / Compute Shaders in Swift

Reaction Diffusion Cellular Automata with Metal Compute Shaders

Swift & Metal: 1,000 Reaction Diffusion Solver Iterations per Second

And as long as we’re mining for Metal nuggets here, if this has inspired you to go learn more about it from scratch, here’s some good intros:

Ray Wenderlich’s iOS 8 Metal Tutorial with Swift: Getting Started and Part 2: Moving to 3D

LiquidFun Tutorial with Metal and Swift – Part 1 and Part 2 and Part 3

objc.io’s Metal

An Introduction to 3D Graphics with Metal in Swift

If you want to get more into the rendering side than that, then check out all the rest of the articles at Metal By Example.


iOS GPU Programming with Swift & Metal

Particles Set Free! High Performance Particles for Swift Developers

Audio Visualisation for iOS with AudioKit & ParticleLab

Rendering Text in Metal with Signed-Distance Fields

Swifter Swift Image Processing With GPUImage

Stream Video Textures into 3D Scene with Metal

The Supercomputer In Your Pocket: Metal & Swift

Understanding PowerVR GPUs via Metal

Swiftly Improving

So you catch the new Swift 1.2 seed yet? If not, looks like we could call this the Daft Punk release:

  • Harder — “compiler crashes have been fixed”, “fewer SourceKit warnings” …
  • Better — “Source files that haven’t changed will no longer be re-compiled by default…”
  • Faster — “Debug builds produce binaries that run considerably faster, and new optimizations…”
  • Stronger — “the language has been further refined to ensure safe, predictable behavior. We also continue to improve the interaction between Swift and Objective-C…”

Time to get on the latest rewrite round! Here’s a selection of good discussions of those “has been further refined” details:

NSHipster’s Swift 1.2

RayWenderlich.com’s What’s New in Swift 1.2

SwiftDoc.org is always up on the very latet releases

Let’s Talk About Sets, Baby!; Swift Set Type in Swift 1.2

Changes to the Swift Standard Library in 1.2 beta 1

Swift 1.2 Performance: Pretty Much Fine; Performance Case Study on Swift 1.1, Swift 1.2, and Objective-C; Swift Performance in Xcode 6.3 Beta

Also, we’d like to draw your attention to a couple so far generally overlooked points that have shown up on boards and mailing lists. First off, the souped up if let

The “if let” construct has been expanded to allow testing multiple optionals and guarding conditions in a single if (or while) statement using syntax similar to generic constraints:

This allows you to test multiple optionals and include intervening boolean conditions, without introducing undesirable nesting (i.e., to avoid the “pyramid of doom”). (19382942)

is actually more souped up than those notes make fully clear:

  • can be an arbitrary number of let + where clauses in a single statement
  • can also be used with ‘if var’ should you wish to mutate values in the conditions
  • can also use a full multiple clause statement in a while loop!

That should be quite enough conditional flow expressivity to quiet all the grumbling on that front.

Next, if you’re chomping at the bit to add the new return value contract annotations to your legacy Objective-C headers, “nullability” is the so far undocumented clang feature for that, so here is a currently-submittable way to add that to production code, from Jens Alfke on the Xcode list:

So the magic invocation I’m putting in my header files (after the #includes) is:

… interface declarations go here…

In property declarations you’ll need to make “nullable” the last meta-attribute, otherwise you’ll get syntax errors in earlier versions of Xcode; so for example “(readonly, nonatomic, nullable)” works but “(readonly, nullable, nonatomic)” is a syntax error because in Xcode 6.1 the parser will see two adjacent commas.

[This is working well, but in converting my interfaces I found a nasty compiler bug that I’m about to submit to Apple — if you declare multiple properties on a single line, adding the (nullable) attribute will cause the parser to lock up in an infinite loop:
@property (readonly, nullable) id a, b, c; // don’t do this!
I spent an hour or so with my MBP’s fan running full speed before figuring out which exact line triggered this.]

Lastly, one of the more subtle consequences of Swift 1.2 no-op cleanup is that you can no longer cleanly use ? as a postfix on an optional optional, as for instance when using map on an optional dictionary lookup:

The Chris Lattner approved way to rewrite this pattern for 1.2 is

to make it more clear to the reader exactly what the intention is here.

So we’re pretty chuffed with how this Swift thing is coming along; pretty much every undue pain point seems addressed to wide satisfaction around teh intertubes — so if you’ve been holding off on jumping in, NOW might be a very good time to get on that!


Swift: And Xcode 6.3 beta 2 did drop as the gentle rain

New Playgrounds; New Playgrounds Part 2 – Sources; Swift Playground Tip – Using External Code Files; Swift: Using functions to initialize View types

Nullability and Objective-C; Nullability and Inherited Initializers in Objective-C

Swift 1.2 Update (Xcode 6.3 beta 2) – Performance

Swift v1.2 β2 Performance

Changes to the Swift standard library in 1.2 betas 2 and 3; SwiftDoc.org

Xcode 6.3: Wheeeee! Beta threeeeee!

Friday Q&A 2015-04-17: Let’s Build Swift.Array discusses the new isUniquelyReferenced

Downcasting in Swift 1.2 with the as! Operator

Swift 1.2: Some overlooked goodies

How to Create a NSNumberFormatter Singleton in Swift

Fetched Result Controller delegate not called after swift 1.2 / xcode 6.3 update

This is a behavior change in Swift 1.2: methods in non-Objective-C-derived classes will no longer be implicitly marked @objc even if they match an Objective-C protocol. You can explicitly mark the methods with the @objc attribute if you don’t want to extend NSObject. This is described in the Xcode 6.3 release notes.

Swift Style Guide: April 2015 Update; SlideShareInc / swift-style-guide; github / swift-style-guide; Swift: Don’t do that

Creating ASCII art in functional Swift is very stylistically functional.

A little @autoclosure hacking “Starting in Swift 1.2, autoclosure defaults to noescape … Fortunately, Apple introduced an “escaping” annotation to override this limitation.”

Join the Sprite Illuminati

Now this looks like a wicked awesome new sprite game making tool: Andreas Löw, already revered in sprite game maker circles for sprite sheet maker TexturePacker which has just continued getting more awesome since we reviewed 2.4 ages ago and for PhysicsEditor the premiere collision shape creator, has decided that the next thing that needs to be made easy is … dynamic lighting, with SpriteIlluminator!

Screen Shot 2015-01-27 at 9.01.52 PM.png

What is that exactly being edited there, you ask? Why, that’s a normal map. Not clear yet? Well, here’s a good writeup on the theory, but simply:

Screen Shot 2015-01-27 at 9.04.05 PM.png

These are supported in pretty much whatever major sprite framework you’re using, including SpriteKit’s SKLightNode as of iOS 8. So if you’re doing any 2D sprite work that would benefit FROM ADDING EXTRA AWESOME, we strongly suggest that you head right on over to the beta signup page while that’s still open!


Adding 2D Lighting to Your Game

Normal map painting for 2d games

2d dynamic lighting tutorial for unity

Art For Non-Artists

Like to make a game, but held up somewhat by the practical issue of having absolutely no artistic ability whatsoever? Yep, we feel your pain. Quite thoroughly indeed. But here’s a series of videos to watch that might help you fake it enough to get by —

2D Game Art for Non-Artists

  1. Introduction
  2. Sky and Mountains
  3. Making Happy Little Trees
  4. Earth Blocks
  5. Awesome 2D Grass
  6. I Wanna Rock
  7. Creating our Buzz Saw
  8. Character

‘Course, those of us who are really non-artists need some more help than that. PixelProspector is an excellent resource for all things related to indie game development, and specifically for graphics they set out the options

  1. Create Graphics by Yourself
    1. Graphics Programs
    2. Tutorials (Drawing, Animation, Pixel Art)
  2. Get Graphics from someone else
    1. Download Assets (Royalty Free Graphics)
    2. Hire Graphic Designer
    3. Big List of Fonts
    4. Big List of Icons

which does pretty well cover the options. Other interesting link collections for the artistically challenged:

Freebies For Designers – Icons, Vectors, Photoshop Brushes, Stock Images & Templates

Best Sites For Getting Free Vector Art Images – 35 Of Them

40+ Websites Providing Useful and Free 3D Models

Cool Text: Logo and Graphics Generator

Any particular goto resources for finding art as a substitute for any kind of talent that you rely on, Dear Readers?


Complete Blender Game Art Tutorial. From zero experience to 2D or 3D game ready asset

300 Awesome Free Things covers various design/asset resources and also business/marketing/productivity services, tools, analyzers, …

Game Assets at ZEEF

A programmer’s guide to creating art for your game

TilemapKit’s collections from OpenGameArt.org:

From Programmer To Artist

Procedural Level Generation

Here’s an interesting set of links from an HN discussion, should you be interested in making a roguelike of your own some day as All True Programmers Are:

Another cheap and very effective technique for procedural level and maze generation is to create a “walker” or series of walkers that start at some point, walk in a direction and then turn at random intervals, leaving a path of corridors and occasionally rooms in their wake. This is how Vlambeer’s Nuclear Throne generates its levels, and there’s a good article from Jan Willem Nijman, it’s developer, here

If you’d like a more academic look into procedural 2d game generation, there’s a nice research paper here, that describes a method and talks about Spelunky a lot (the king of procedural 2d level generation, in my book)…

Additionally, Derek Yu open sourced the code to the original Spelunky, and Darius Kazemi created a great breakdown of its level generation techniques here, also with interactive examples…

The action roguelike genre, particularly the roguelike FPS, is a vital new area being explored by indie game developers. It reminds me of the way 2D platformers were mined, explored, and iterated upon starting around 7 or 8 years ago…

Cool stuff! At least to us old school types who still think ASCII Nethack is TEH BESTEST GAME EVAR!!!1!one!!!


Rooms and Mazes: A Procedural Dungeon Generator

Building a Procedural Dungeon Generator In C#

Procedural Content Generation in Games: A textbook and an overview of current research

The Key Design Elements of Roguelikes

Procedural Dungeon Generation Algorithm