Browser Games

Only for Specialists

Specialization needed

Flash

• New Language
• Different Best Practices
• "Desktop Only"

Canvas

• Outside of the DOM
• Not so clear Separation Of Concerns
• Redundancy of Styles

WebGL

• Low Level API
• New Terrain
• Shaders

Game Engines that can help you

Starling

• Flash Library
• App conversion
• Tweens, Blends, Multitouch...

Pixi.js

• WebGL with Canvas Fallback
• Physics Library
• OpenSource

PlayCanvas

• WebGL only
• Online Editor and Hosting
• Physics Library
• OpenSource

Unreal

• Powerful Engine
• C++
• Cross Platform
• Physics, AI, Animation Effects...

Which games do you produce?

Bringing people together to have a good time with games wherever, whenever!

Casual Skill Gaming

Can we use the knowledge we acquired building webs?

YES!

How?

With DOM!

What's the difference between these?

Behind the scenes

.banner {
	min-height: 2em;
	background-color: gold;
	border-radius: 7px;
}
.banner.fall-down {
	transform: translateY(-100%);
}
.banner.fall-down.active {
	transform: translateY(0);
}
.slow {
	transition: all 1.5s ease;
}
						

Behind the scenes

.card {
	background-size: cover;
	width: 161px;
	height: 221px;
}
.card.ace {
	background-image: url('../images/aceHearts.png');
}
.card.move {
	transform: translateX(300px);
}
.slow {
	transition: all 1.5s ease;
}
						

... and these?

Behind the scenes

.banner {
	min-height: 2em;
	background-color: gold;
	border-radius: 7px;
}
.banner.errorMessage { background-color: red; }
.banner.zoom-in {
	transform: scale( 0.1 );
}
.banner.zoom-in.active {
	transform: scale( 1 );
}
.slow { transition: all 1.5s ease; }
						

Behind the scenes

.card {
	background-size: cover;
	width: 161px;
	height: 221px;
}
.card.ace { background-image: url('../images/aceHearts.png'); }
.card.queen { background-image: url('../images/queenHearts.png'); }
.card.king { background-image: url('../images/kingHearts.png'); }
.card.grow.active {
	transform: scale( 1.5 );
}
.slow { transition: all 1.5s ease; }
						

... or these?

Behind the scenes

.banner {
	min-height: 2em;
	background-color: gold;
	border-radius: 7px;
}
.banner.fade-out {
	opacity: 1;
}
.banner.fade-out.active {
	opacity: 0;
}
.slow { transition: all 1.5s ease; }
						

Behind the scenes

.card {
	background-size: cover;
	width: 161px;
	height: 221px;
}
.card.fade-out {
	opacity: 1;
}
.card.fade-out.active {
	opacity: 0;
}
.slow { transition: all 1.5s ease; }
						

... or even these?

Behind the scenes

.banner {
    min-height: 2em;
	background-color: gold;
	border-radius: 7px;
}
.banner.feedback {
	width: 300px;
	transform: rotate(-90deg);
}
						

Behind the scenes

.card {
	background-size: cover;
	width: 161px;
	height: 221px;
}
.card.playing {
	transform: translateY(120%) rotate(180deg);
}
.card.playing.active {
	transform: translate(50%, -25%) rotate(0deg);
}
.slow { transition: all 1.5s ease; }
						

Tips to Improve Productivity

WebSockets

• Enables Full Duplex Communication
• Perfect for Reactive Apps
• Supported by All Major Browsers

Box2D

• Physics Library
• Models a Gravity World
• Collision Detection

Work with your own coordinate system

• Ideal for Responsive Games
• Abstraction from the Real Screen Size
• Keep Code Simple