Building Native Apps- A Digital Canvas for Coders and Designers with Walter Luh

coronalabs.com@walterluh
Corona
Building Native Apps
A digital canvas for everyone
®
NBC/Universal powers their campaign with Corona

Turning an idea into something real
+ + =
Software DevelopmentCreative

Graphics
Yesterday Today Tomorrow

Graphics
Circa 2000

Mobile Graphics
Circa 2005

Mobile Graphics
Circa 2008

Today

What is Corona?
same code, multiple stores
develop 5-10x faster
SDK for native apps
...

Breakthrough Productivity
36 hours
code+graphics+sound
(complete 2 level game)
14 hours
code+graphics+sound
(gameplay only)
“Angry Birds” “Fruit Ninja” “TinyWings”
12 hours
code+graphics+sound
(gameplay only)
“Developing directly in Xcode would have
been at least 5x more code than Corona”
– Unicorn Labs, Top 20 iPad eBook
Ship #1 apps 10x faster

Not Just for Games
ESP Guitars CheeseMonger Planet Sushi Thai Cook
Visually stunning business apps

Performance
Simplicity
Flexibility
Corona
The Sweet Spot
Staﬀ Pick

2-D vs 3-D
$ vs $$$

Corona Graphics
Optimized OpenGL for 2-D

CONFIDENTIALcoronalabs.com
OpenGL in one line
Phone SDK.
// Display "myImage.png"
// ----------------------------------------------------------------------------
// OpenGLESTextureAppDelegate.m
// ----------------------------------------------------------------------------
#import "OpenGLESTextureAppDelegate.h"
#import "EAGLView.h"
#import "OpenGLESTextureViewController.h"
@implementation OpenGLESTextureAppDelegate
@synthesize window=_window;
@synthesize viewController=_viewController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
self.window.rootViewController = self.viewController;
return YES;
}
- (void)applicationDidBecomeActive:(UIApplication *)application
{
/*
Restart any tasks that were paused (or not yet started) while the application was
inactive. If the application was previously in the background, optionally refresh the user
interface.
*/
[self.viewController drawFrame];
}
- (void)dealloc
{
[_window release];
[_viewController release];
[super dealloc];
}
@end
// ----------------------------------------------------------------------------
// EAGLView.m
// ----------------------------------------------------------------------------
#import <QuartzCore/QuartzCore.h>
@interface EAGLView (PrivateMethods)
- (void)createFramebuffer;
- (void)deleteFramebuffer;
@end
@implementation EAGLView
@synthesize context;
// You must implement this method
+ (Class)layerClass
{
return [CAEAGLLayer class];
}
//The EAGL view is stored in the nib file. When it's unarchived it's sent -initWithCoder:.
- (id)initWithCoder:(NSCoder*)coder
{
self = [super initWithCoder:coder];
if (self) {
CAEAGLLayer *eaglLayer = (CAEAGLLayer *)self.layer;
eaglLayer.opaque = TRUE;
eaglLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithBool:FALSE],
kEAGLDrawablePropertyRetainedBacking,
kEAGLColorFormatRGBA8,
kEAGLDrawablePropertyColorFormat,
nil];
}
return self;
}
- (void)dealloc
{
[self deleteFramebuffer];
[context release];
[super dealloc];
}
- (void)setContext:(EAGLContext *)newContext
{
if (context != newContext) {
[context release];
context = [newContext retain];
[EAGLContext setCurrentContext:nil];
}
}
- (void)createFramebuffer
{
if (context && !defaultFramebuffer) {
[EAGLContext setCurrentContext:context];
// Create default framebuffer object.
glGenFramebuffers(1, &defaultFramebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, defaultFramebuffer);
// Create color render buffer and allocate backing store.
glGenRenderbuffers(1, &colorRenderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);
[context renderbufferStorage:GL_RENDERBUFFER fromDrawable:(CAEAGLLayer
*)self.layer];
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH,
&framebufferWidth);
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT,
&framebufferHeight);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER,
colorRenderbuffer);
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
NSLog(@"Failed to make complete framebuffer object %x",
glCheckFramebufferStatus(GL_FRAMEBUFFER));
}
}
- (void)deleteFramebuffer
{
if (context) {
if (defaultFramebuffer) {
glDeleteFramebuffers(1, &defaultFramebuffer);
defaultFramebuffer = 0;
}
if (colorRenderbuffer) {
glDeleteRenderbuffers(1, &colorRenderbuffer);
colorRenderbuffer = 0;
}
}
}
- (void)setFramebuffer
{
if (context) {
if (!defaultFramebuffer)
[self createFramebuffer];
glBindFramebuffer(GL_FRAMEBUFFER, defaultFramebuffer);
glViewport(0, 0, framebufferWidth, framebufferHeight);
}
}
- (BOOL)presentFramebuffer
{
BOOL success = FALSE;
if (context) {
glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);
success = [context presentRenderbuffer:GL_RENDERBUFFER];
}
return success;
}
- (void)layoutSubviews
{
// The framebuffer will be re-created at the beginning of the next setFramebuffer
method call.
}
@end
// ----------------------------------------------------------------------------
// OpenGLESTextureViewController.m
// ----------------------------------------------------------------------------
#import <QuartzCore/QuartzCore.h>
#import "OpenGLESTextureViewController.h"
@interface OpenGLESTextureViewController ()
@property (nonatomic, retain) EAGLContext *context;
@property (nonatomic, assign) CADisplayLink *displayLink;
- (void) loadTexture;
@end
@implementation OpenGLESTextureViewController
@synthesize animating, context, displayLink;
- (void)awakeFromNib
{
EAGLContext *aContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES1];
if (!aContext)
NSLog(@"Failed to create ES context");
else if (![EAGLContext setCurrentContext:aContext])
NSLog(@"Failed to set ES context current");
self.context = aContext;
[aContext release];
[(EAGLView *)self.view setContext:context];
[(EAGLView *)self.view setFramebuffer];
[self loadTexture];
self.displayLink = nil;
}
- (void) loadTexture
{
glEnable(GL_TEXTURE_2D);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
NSString *path = [[NSBundle mainBundle] pathForResource:@"myImage" ofType:@"png"];
NSData *texData = [[NSData alloc] initWithContentsOfFile:path];
UIImage *image = [[UIImage alloc] initWithData:texData];
GLuint width = CGImageGetWidth(image.CGImage);
GLuint height = CGImageGetHeight(image.CGImage);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
void *imageData = malloc( height width 4 );
CGContextRef image_context = CGBitmapContextCreate( imageData, width, height, 8, 4
width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big );
CGColorSpaceRelease( colorSpace );
CGContextClearRect( image_context, CGRectMake( 0, 0, width, height ) );
CGContextTranslateCTM( image_context, 0, height - height );
CGContextDrawImage( image_context, CGRectMake( 0, 0, width, height ), image.CGImage );
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE,
imageData);
CGContextRelease(image_context);
free(imageData);
[image release];
[texData release];
}
- (void)dealloc
{
glDeleteTextures(1, &textureID);
// Tear down context.
if ([EAGLContext currentContext] == context)
[context release];
[super dealloc];
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Tear down context.
if ([EAGLContext currentContext] == context)
self.context = nil;
}
- (void)drawFrame
{
[(EAGLView *)self.view setFramebuffer];
// Replace the implementation of this method to do your own custom drawing.
static const GLfloat squareVertices[] = {
-0.5f, -0.33f,
0.5f, -0.33f,
-0.5f, 0.33f,
0.5f, 0.33f,
};
static const GLfloat texCoords[] = {
0.0, 1.0,
1.0, 1.0,
0.0, 0.0,
1.0, 0.0
};
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glEnableClientState(GL_VERTEX_ARRAY);
glTexCoordPointer(2, GL_FLOAT, 0, texCoords);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
[(EAGLView *)self.view presentFramebuffer];
}
@end
display.newImage("myImage.png")

API for Designers
local image =
display.newImage("myImage.png")
-- Properties
image.x = 100
image.y = 100
image.rotation = 45
image.blendMode = "add"
-- Tween
transition.to( image, { alpha = 0.0 } )

Intuitive Draw Order
Drawing Order Result

Next-Generation Graphics
New 2.5D engine later this year!

Corona
Rendering Engine
Virtual Machine
User
Input
Networking
Device
Device/OS
Native Mobile App
Text
StrokesFills
Bitmaps
Shapes
Objects Behaviors Dynamic Layout Events Device Capabilities Etc
Camera Mic
GPS Etc
Artwork Compiled Code Localized Strings Workflow
Developer
Assets
User Interface
Architecture

Lua:an industry standard

Small Code Size
1.4 MB
Footprint

Lua types
nil
boolean
number
string
function
table
userdata
• JavaScript-like syntax
• Functions are closures
• Lexical scope (non-local vars)
• Objects are tables

Lua vs Other Languages
if
(!carMoving)
{

//
do
something
}
else
if
(noGas)
{

//
do
something
else
}
for
(i=1;
i<=10;
i++)
{

print(i)
}
for
(j=100;
j>0;
j-‐-‐)
{

print(j)
}
if
(not
carMoving)
then

-‐-‐
do
something
elseif
(noGas)
then

-‐-‐
do
something
else
end
for
i
=
1,10
do

print(i)
end
for
j
=
100,1,-‐1
do

print(j)
end

array
=
{
"a",
"b",
100,
"hello"
}
dictionary
=
{
x=5,
y=7,
name="Joe"
}
t
=
{}

-‐-‐
empty
table
t[1]
=
"a"

-‐-‐
numerical
index
t["x"]
=
5

-‐-‐
key
index
t.x
=
5

-‐-‐
equivalent
property
access
t.hasProperties
=
true
t[array]
=
"Joe"

-‐-‐
any
type
can
be
a
key!!!
t["printJoe"]
=
function()
print("Joe")
end
Lua objects areTables

-‐-‐
create
empty
table
local
o
=
{}
-‐-‐
add
method
function
o:saySomething(
something
)

print(
something
)
end
-‐-‐
output
'hi'
o:saySomething(
"hi!"
)
Object methods

-‐-‐
create
empty
table
local
o
=
{}
-‐-‐
add
method
local
function
f(
self,
something
)

print(
something
)
end
o.saySomething
=
f
-‐-‐
output
'hi'
o.saySomething(
o,
"hi!"
)
The ':' is syntactic sugar

Arrays are 1-based
//
Other
languages:
index
begins
with
0

array=['a','b','c'];
for
(
var
i=0;
i<arr.length;
i++)
{

log(
array[i]
)
}
-‐-‐
Lua:
index
begins
with
1
local
array
=
{'a','b','c'}
for
i=1,#array
do

print(
array[i]
)
end

Corona Enterprise
• Integrate native libraries
• Wrap native code in your own Lua APIs
• Automate builds
Lua and Objective-C/C++ and Java

Fast Iteration

Multiple Screen Sizes/Shapes

Content Scaling in Corona

Content Scaling
-‐-‐
config.lua
application
=
{

content
=
{

width
=
320,

height
=
480,

scale
=
"letterbox",

},
}
• Code in content units (not screen pixels)
• width/height specify content dimensions
• Scale mode determines how physical display is filled

Retina Displays

Retina Imaging in Corona
-‐-‐
config.lua
application
=
{

content
=
{

width
=
320,

height
=
480,

scale
=
"letterbox",

imageSuffix
=
{

["-‐x15"]
=
1.5,

["-‐x2"]
=
2,

},

},
}

Retina ImagingAPI
display.newImageRect(
imageName,
w,
h
)
• width/height in content units (not screen pixels)
• Best matching image file based on scale factor
• Suﬃxes in config.lua determine image/scale mapping

API
Application Programming Interface Interaction

Hard Problems Made Easy
(e.g. how Corona taught me to love physics)

local sky = display.newImage( "clouds.png" )

local ground = display.newImage( "ground.png" )
ground.x = 160
ground.y = 445

ground.x = 160
ground.y = 445
local crate = display.newImage( "crate.png" )
crate.x = 180
crate.y = 80
crate.rotation = 10

ground.x = 160
ground.y = 445
crate.x = 180
crate.y = 80
crate.rotation = 10
local physics = require( "physics" )
physics.start()

ground.x = 160
ground.y = 445
crate.x = 180
crate.y = 80
crate.rotation = 10
physics.start()
physics.addBody( ground, { friction=0.5 } )
ground.bodyType = "static"

ground.x = 160
ground.y = 445
crate.x = 180
crate.y = 80
crate.rotation = 10
physics.start()
physics.addBody( ground, { friction=0.5 } )
ground.bodyType = "static"
physics.addBody( crate, { density=2.0,
friction=0.5, bounce=0.3 } )

What if we want
lots of crates?

crate.x = 180
crate.y = -100
crate.rotation = 10
physics.addBody( crate, { density=2.0,

local function spawnCrate()
! local crate = display.newImage( "crate.png" )
! crate.x = math.random( 320 )
! crate.y = -100
! crate.rotation = 10
! physics.addBody( crate, { density=2.0,
end
timer.performWithDelay( 500, spawnCrate, 50 )

What if gravity was up
rather than down?

physics.setGravity( 0, 9.8 )

physics.setGravity( 0, -9.8 )

Over 500APIs

WebK
SQLite database
File read/write
Full Lua scripting language
Hardware-accelerated graphics
GPS, compass, accelerometer
Simple and complex physical bodies
Networking (TCP, FTP, HTTP, etc.)
Video playback (streaming or local)
Physical properties (mass, friction,
Joints, wheels, hinges, pulleys, etc.
Animated sprites with independent
Collision detection, including pre
OpenFeint game network support
Vector drawing APIs (shapes and
Native UI (keyboard, etc.)
Crypto (md4, md5, sha1, sha512,
Audio (sound effects or MP3)
Animation and transition libra
Facebook and Twitter libraries
Improved texture memory han
physics simulation
oto library
Tons of Features
<html5>
• OpenGL graphics
• Open AL audio
• Box2D Physics
• Texture atlases, sprites, ...
• Networking
• GPS, multitouch, accelerometer, ...
• Native web views, textfields, ...
• Camera, photo library, video, ...
• Services: ads, analytics, IAP, ...
• And much more!

AmazingApps
World-class apps, developers, and community

Thriving Ecosystem
Corona
Fireworks
Photoshop Plugin
Zwoptex
TextMate
Particle Candy
Corona Remote
Corona Project Manager
Lime
Sprite Deck
LuaGlider
Texture Packer

No Coding Required
Build native apps using Photoshop/Kwik

Developers like you
#1 #1
From Designers to Coders. From Indies to Studios.

Anyone can be #1...with Corona

Future Belongs toYou!

Start today! it’s free
www.CoronaLabs.com

Building Native Apps- A Digital Canvas for Coders and Designers with Walter Luh

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Building Native Apps- A Digital Canvas for Coders and Designers with Walter Luh

Similar to Building Native Apps- A Digital Canvas for Coders and Designers with Walter Luh (20)

More from FITC

More from FITC (20)

Recently uploaded

Recently uploaded (20)

Building Native Apps- A Digital Canvas for Coders and Designers with Walter Luh