Html5 game, websocket e arduino

  • 245 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
245
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Html5 Game + Websocket + Arduino Andrea D’Ippolito + Giuseppe Modarelli
  • 2. Phaser.io 101 Javascript Game Development Engine
  • 3. 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');
  • 4. Phaser.io { preload: function() { ... }, create: function() { ... }, update: function() { ... } }
  • 5. 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() { ... } }
  • 6. credits: Emanuela Oliva. emanuelaoliva.com
  • 7. 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() { ... } }
  • 8. 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; } ... } }
  • 9. Socket.io 101 Websocket connection for real time pub/sub messaging
  • 10. 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); });
  • 11. 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>
  • 12. 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() { ... } }
  • 13. Arduino 101 Sketch Arduino per accendere un led con un bottone
  • 14. Arduino
  • 15. Arduino const int buttonPin = 3; // the number of the pushbutton pin const 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: } }
  • 16. Noduino 101 Come controllare Arduino con Javascript (grazie a node e websocket) Accendere un led con bottone
  • 17. 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(); }); }); }); });
  • 18. 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'); }); }); }); });
  • 19. 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); }); }); });
  • 20. 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){ [...] }); }); });
  • 21. 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
  • 22. www.monksoftware.it info@monksoftware.it Twitter: @monksoftwareit Facebook: MONKSoftwareIT Roma Via Tirone 11, 00146 +39 06 99291819 Kraków ul. Rakowicka 11, 30-033 +48 888 565 545