Embed Size (px)
DESCRIPTION
Citation preview
Html5 Game + Websocket + Arduino
Andrea D’Ippolito + Giuseppe Modarelli
Phaser.io 101
Javascript Game Development Engine
Phaser.io
var game = new Phaser.Game(1200, 600, Phaser.AUTO);
game.state.add('boot', BootState); game.state.add('preload', PreloadState); game.state.add('menu', MenuState); game.state.add('play', PlayState); game.state.add('finish', FinishState);
game.state.start('boot');
Phaser.io
{ preload: function() { ... },
create: function() { ... },
update: function() { ... }}
Phaser.io
{ preload: function() { ... this.load.image('sky', 'assets/sky.png'); this.load.image('cloud1', 'assets/cloud1.png'); this.load.image('cloud2', 'assets/cloud2.png'); this.load.image('ground', 'assets/ground.png'); this.load.image('home', 'assets/home.png'); this.load.image('startButton', 'assets/start.png'); this.load.spritesheet('monk', 'assets/monk.png', 80, 103); ... },
create: function() { ... },
update: function() { ... }}
credits: Emanuela Oliva. emanuelaoliva.com
Phaser.io
{ preload: function() { ... },
create: function() { ... this.player = this.game.add.sprite(560, this.game.world.height - 150, 'monk');
this.game.physics.arcade.enable(this.player);
this.player.body.bounce.y = 0.35; this.player.body.gravity.y = -15; this.player.body.collideWorldBounds = true;
this.player.animations.add('left', [3, 4], 10, true); this.player.animations.add('right', [0, 1], 10, true);
this.cursors = this.game.input.keyboard.createCursorKeys();
this.game.camera.follow(this.player); ... },
update: function() { ... }}
Phaser.io
{ preload: function() { ... },
create: function() { ... },
update: function() { ... if (this.cursors.left.isDown) { this.player.animations.play('left'); this.player.body.velocity.x = -75; } else if (this.cursors.right.isDown) { this.player.animations.play('right'); this.player.body.velocity.y = 75; } else { this.player.animations.stop(); this.player.frame = 2; } ... }}
Socket.io 101
Websocket connection for real time pub/sub messaging
Socket.io
var express = require('express');var app = express();var http = require('http').Server(app);var io = require('socket.io')(http);
io.on('connection', function(socket) { socket.on('controls', function(msg) { socket.broadcast.emit(msg); });
socket.on('finish', function(msg) { socket.broadcast.emit('you won'); });
socket.on('controller', function(msg) { socket.broadcast.emit('controller connected', msg); });});
http.listen(3000, function() { console.log('Listening on port %d', http.address().port);});
Socket.io
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="/socket.io/socket.io.js"></script></head><body> <button id="left">Turn Left</button><button id="right">Turn Right</button>
<script> var socket = io(); socket.emit('controller', 'HTML5 Gamepad');
$(function(){ $('#left').click(function() { socket.emit( 'controls', 'turn left'); });
$('#right').click(function() { socket.emit( 'controls', 'turn right'); }); });
socket.on('you won', function(mgs) { window.location.href = 'http://www.wearemonk.com' ; }); </script></body></html>
Phaser.io + Socket.io
{ preload: function() { ... },
create: function() { ... this.socket = io(); var self = this;
this.socket.on('turn left', function(msg) { self.turnLeft(); });
this.socket.on('turn right', function(msg) { self.turnRight(); }); ... },
update: function() { ... }}
Arduino 101
Sketch Arduino per accendere un led con un bottone
Arduino
Arduino
const int buttonPin = 3; // the number of the pushbutton pinconst int ledPin = 4; // the number of the LED pin
int buttonState = 0; // variable for reading the pushbutton status
void setup() { pinMode(ledPin, OUTPUT); // initialize the LED pin as an output:
pinMode(buttonPin, INPUT); // initialize the pushbutton pin as an input:}
void loop(){
buttonState = digitalRead(buttonPin); //read the state of the pushbutton value
// check if the pushbutton is pressed. // if it is, the buttonState is HIGH:
if (buttonState == HIGH) { digitalWrite(ledPin, HIGH); // turn LED on: } else { digitalWrite(ledPin, LOW); // turn LED off: }}
Noduino 101
Come controllare Arduino con Javascript (grazie a node e websocket)Accendere un led con bottone
Noduino
var requirejs = require('requirejs');requirejs.config({nodeRequire: require});
requirejs(['../public/scripts/libs/Noduino', '../public/scripts/libs/Noduino.Serial', '../public/scripts/libs/Logger'], function (NoduinoObj, NoduinoConnector, Logger) { var Noduino = new NoduinoObj({'debug': false}, NoduinoConnector, Logger); Noduino.connect(function(err, board) { if (err) { return console.log(err); } var led_4; board.withLED({pin: 4}, function(err, LED) { if (err) { return console.log(err); } led_4 = LED; led_4.on('on',function(){ setTimeout(function () { led_4.setOff(); }, 250); }); });
board.withButton({pin: 3}, function(err, Button) { if (err) { return console.log(err); } Button.on('push', function() { console.log('Button pushed'); led_4.setOn(); }); });
});});
Noduino
var requirejs = require('requirejs');var socket = require('socket.io-client')('http://localhost:3000');requirejs.config({nodeRequire: require});
requirejs(['../public/scripts/libs/Noduino', '../public/scripts/libs/Noduino.Serial', '../public/scripts/libs/Logger'], function (NoduinoObj, NoduinoConnector, Logger) { var Noduino = new NoduinoObj({'debug': false}, NoduinoConnector, Logger); Noduino.connect(function(err, board) { if (err) { return console.log(err); } var led_4; board.withLED({pin: 4}, function(err, LED) { if (err) { return console.log(err); } led_4 = LED; led_4.on('on',function(){ setTimeout(function () { led_4.setOff(); }, 250); }); });
board.withButton({pin: 3}, function(err, Button) { if (err) { return console.log(err); } Button.on('push', function() { console.log('Button pushed'); led_4.setOn();
socket.emit('controls','turn left'); }); });
});});
Noduino
var requirejs = require('requirejs');var socket = require('socket.io-client')('http://localhost:3000');requirejs.config({nodeRequire: require});
requirejs(['../public/scripts/libs/Noduino', '../public/scripts/libs/Noduino.Serial', '../public/scripts/libs/Logger'], function (NoduinoObj, NoduinoConnector, Logger) { var Noduino = new NoduinoObj({'debug': false}, NoduinoConnector, Logger); Noduino.connect(function(err, board) { if (err) { return console.log(err); } var led_4; board.withLED({pin: 4}, function(err, LED) { [...] });
board.withButton({pin: 3}, function(err, Button) { if (err) { return console.log(err); } Button.on('push', function() { console.log('Button pushed'); led_4.setOn();
socket.emit('controls','turn left'); }); }); socket.on('you won', function(msg){ console.log("YOU WON"); setInterval(function () { led_7.blink(250); led_4.blink(250); }, 500); });
});});
Noduino
var requirejs = require('requirejs');var socket = require('socket.io-client')('http://localhost:3000');requirejs.config({nodeRequire: require});
requirejs(['../public/scripts/libs/Noduino', '../public/scripts/libs/Noduino.Serial', '../public/scripts/libs/Logger'], function (NoduinoObj, NoduinoConnector, Logger) { var Noduino = new NoduinoObj({'debug': false}, NoduinoConnector, Logger); Noduino.connect(function(err, board) { if (err) { return console.log(err); } var board_serial = board.c.boards[0].serial.path; socket.emit('controller','Arduino: '+board_serial); var led_4; board.withLED({pin: 4}, function(err, LED) { [...] });
board.withButton({pin: 3}, function(err, Button) { if (err) { return console.log(err); } Button.on('push', function() { console.log('Button pushed'); led_4.setOn();
socket.emit('controls','turn left'); }); }); socket.on('you won', function(msg){ [...] });
});});
recap @ wcap
● 404 Game: http://bit.ly/rescuemonk
● Phaser.io: http://phaser.io● Socket.io: http://socket.io/ ● Arduino: www.arduino.cc
○ Button: http://arduino.cc/en/tutorial/button● Noduino: http://semu.github.io/noduino/
● Andrea: @adedip / andreadippolito.it● Giuseppe: @gmodarelli / gmodarelli.com
[email protected]: @monksoftwareitFacebook: MONKSoftwareIT
RomaVia Tirone 11, 00146 +39 06 99291819
Krakówul. Rakowicka 11, 30-033+48 888 565 545
