Video Games
with
https://github.com/rafinskipg
Follow our project:
http://cooldog.venturastudios.org/
https://www.facebook.com/thecooldogadventures
About me
- FrontEnd
- Node Js
Software developer
We make mobile advertisements easy and accessible for everyone
I work at
SONATA
But..
WhaT IS A GAME MADE OF?
Ok let's GET DIRTY!
Entities
Creatures
Weapons
Bullets
Enemies
Bonuses
Splashes, Explosions, etc...
Input & OutpuT
Move your entities
Add sounds!
Respond to events
Give feedback to the user
A game design
What's the purpose?
Defining your idea
Defining your idea
Prototyping
Iterate
& MATHS!
Let's GET TECHIE!
Do you Know WHAT IS HTML 5,
MOTHERFUCKER?
What are you talking ABOUT?
I have no idea what it means!
A website is composed by:
Dom Elements
CSS
JavaScript Code
Rendering
DOM Elements + CSS
Canvas
WebGL
What do I CHOOSE?
DOM / CSS 3:
- Good: For 'forms' games, for simple games. You can do sprites with css clasess or background positions.
- Bad: It doesn't feel good to write all in css animations / transitions. It's not aimed for that.
Canvas:
- Good: High mobile device support. You can still use dom elements.
- Bad: Less FPS than WebGL.
WebGL:
- Good: FPS Ratio is higher. 2d and 3d. GPU Accelerated.
- Bad: Less mobile support. Harder
We picked Canvas
Quick start, nearly all the libraries work on top of that.
frameworks like PixiJS allows you to render in WebGL with Canvas fallback,
so it would be my next choice right now.
(@JohnHackworth 's advice)
I Don't fucking
care
I just want to make games
TELL ME MORE
There are tons of tools
for creating games
Without coding
WIMI5
DEMO TIME
GOO CREATE
Construct 2
STENCYL
More info & MORE TOOLS
:)
http://kotaku.com/5979539/a-beginners-guide-to-making-your-first-video-game
- http://www.rpgmakerweb.com/
-
http://www.yoyogames.com/studio
I Care
I'M A DEVELOPER
Or just curious
And I wanT GOOD TOOLS
ADAPT TO A MODERN DEVELOPMENT FLOW
Pick any automation tool.
There are tons out there, but stick close to what the community is using, keeping up to date is important
GET your SWORD SHARP
AnD THERE'S MORE TO CHOOSE FROM
PICK YOUR GAME ENGINE/ FRAMEWORK
...
That might help
http://html5gameengine.com/
https://gist.github.com/bebraw/768272
OR GO WITH THE BASICS
Which i did
I didn't know what i was doing.
BUT WAS FUN TO LEARN!
MY BRICKS:
THE BASICS
build your house with that!
Canvas
Create a canvas tag
<canvas id="canvas_layer" ></canvas>
Initialize it:
var canvas = document.getElementById('canvas_layer');
canvas.width = window.innerWidth; //Or wathever
canvas.height = window.innerHeight; //Or wathever
Get the 2D context:
var ctx = canvas.getContext('2d'); //We will draw here
RequestAnimATIONFRAME
It is used for calling the game loop
Improved performance vs setTimeOut
Adapts the frame rate, only painting when the computer is ready. When all the work has ended, avoiding collapse.
function mainGameLoop(){
//Updating your entities goes here
requestAnimationFrame(mainGameLoop);
}
mainGameLoop();
more info: http://creativejs.com/resources/requestanimationframe/
Using the LOOP
Things you want to DO
on the loop
- Updating the sprite frame
- Updating the position
- Making responses to events
- Removing enemies
- Adding enemies
- Adding bullets
- Checking if bullets collide with enemies
- Updating backgrounds positions
- Etc...
Updating - CollIDING - RENDERING
var then = Date.now(); //Previously defined at game start
var animFramePID; //If you want to cancelAnimationFrame later on
function mainGameLoop(){
//Calculate time difference
var now = Date.now();
var dt = now - then;
then = now;
updateEntities(dt);
checkCollissions();
render();
animFramePID = requestAnimationFrame(mainGameLoop);
}
Update
Example, updating
function updatePoints(dt){
points = hu.compact(
points
.map(updateTimeCounter(dt))
.map(moveUp(dt))
.map(removeIfTimeCounterGreaterThan(1))
);
}
function updateTimeCounter(dt){
return function(entity){
entity.timeAlive = entity.timeAlive ? entity.timeAlive + dt : dt;
return entity;
}
}
More Examples...
function removeIfOutsideScreen(entity){
if(!isOutsideScreen(entity.pos, entity.getSize())){
return entity;
}
}
Sometimes shit happens and you just do bad code, or worst...
Bad architecture
I have lots of bad architecture choices I didn't thought about.
Bad things
function updateEntities(dt) {
updatePlayer(dt);
updateBosses(dt);
updateBullets(dt);
updateEnemies(dt);
updateSpecials(dt);
updateExplosions(dt);
updatePointsToRender(dt);
updateDialogs(dt);
updateMiscelanea_front(dt);
updateMiscelanea_back(dt);
updateBonuses(dt);
updateBonusWeapons(dt);
updateEnemyBullets(dt);
updateNeutralBullets(dt);
}
I could show you tons of that things, but, instead, let's focus on what I learned.
Use OOP
Object oriented programming.
function Entity(options){
this.name = options.name;
/* ... */
}
Entity.prototype.getDimensions = function(){
//calculate things here
}
Yeah, listen to this guy
http://mortimergoro.github.io/SuperSaiyanJS
Use small FUNCTIONS
function shouldAddBoss(){ return isFinalStage() && !bossIsOut() && introHasEnded();
}
Yep.
I have to refactor all my code :D
DrawINg on canvas
1st rule: Abstract it
scene.renderEntity(myPlayer);
entity.render(getContext());
Entity model
RenderableEntity.prototype.render = function(ctx){
this.getEnabledAnimation().render(ctx, this.rotateSprite);
}
Drawing on canvas
Sprite Class
Don't draw too big images, neither tons of them.
/* ... Sprite.prototype.render ... */
ctx.drawImage( resources.get(this.url), Math.round(x), Math.round(y), this.size[0], this.size[1]); /* ... */
USING LOCALSTORAGE
As simple as
localStorage.setItem('myApplicationInfo', JSON.stringify(data));
localStorage.getItem('myApplicationInfo');
var data = {
lifes: 5,
maxPower: 1000,
timeSpent: 100.50,
maxPoints: 4050
/* ... */
}
AUDIO LIBRARY
in this case i picked Howler, but there are more
var song = new Howl({
urls: ['sounds/songs/wendy_sulca_servesa.mp3'],
volume: 0.5
});
//It allows Play/Stop/Pause/Fade, events...
Loader
You need to preload your assets before every scene
This is fine: http://thinkpixellab.com/pxloader/
Building
Your daily Process should include
- Run a server
- Livereload changes
- SASS / Jade compilation
- JsHint / JsLint your files
- Run automated test on hook pre-commit
Your BUILD SHOULD INCLUDE
- JavaScript minification
- Uglify
- CSS minification
- Concat all things!
- Run automated tests
- Image-min if needed
I DON't MIND IF YOU PREFER
make
gulp
grunt
node js scripts
broccoli
...
They are worth it, whichever you choose
REUSE
I've picked my build from the yeoman generator
(hell yeah, reuse all the things!)
GOING MOBILE
Use
Optimize with
CocoonJS
https://www.ludei.com/cocoonjs
Or Try
https://crosswalk-project.org/
http://www.tresensa.com/
Some considerationS
- Use FastClick.js
- LocalStorage is your friend
- Use device emulators
- Profile your app on devtools
- Minify everything
GOING DESKTOP
https://github.com/rogerwang/node-webkit
And REMEMBER!
HTML5 is everywhere
Mobiles
PCs
TVs
Consoles
...
Bonus track
From Unity to Three.JS by @HelloEnjoy
http://helloenjoy.com/2013/from-unity-to-three-js/
Audio
Free music list | http://opensourcemusic.com/free-music-list/ |
Free Sounds | http://freesounds.org |
Open game audio | http://opengameart.org/art-search-advanced?keys=&field_art_type_tid%5B%5D=13 |
Free Music archive | http://freemusicarchive.org/ |
Free sound effects generator | http://www.bfxr.net |
More free music | http://incompetech.com/music/ |
Free sound effects | http://creatingsound.com/sound-effects/free-sound-effects/ |
Fress sound effects | http://soundjay.com |
Assets
Open game art | http://opengameart.org/ |
Open Game Art Bundle | http://open.commonly.cc/ |
Free Game Arts | http://freegamearts.tuxfamily.org/ |
Free 3D models | http://www.blendswap.com |
Free game assets | http://kenney.nl/ |
Open Source Vectorial Cliparts | http://www.clker.com/ |
Free Vector Icons | http://www.flaticon.com/ |
Free mobile game UI | http://uidock.com/mobile-game-gui/ |
DONE!
If you have prototyped your first game, now share it!
You will learn about how your game needs to evolve
http://makegames.tumblr.com/post/1136623767/finishing-a-game
BYE!
Making HTML5 games. Version 0.1.0
By rafinskipg
Making HTML5 games. Version 0.1.0
Slides about making HTML5
- 1,366