Html5 game, websocket e arduino
Upcoming SlideShare
Loading in...5
×
 

Html5 game, websocket e arduino

on

  • 209 views

 

Statistics

Views

Total Views
209
Views on SlideShare
209
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 game, websocket e arduino Html5 game, websocket e arduino Presentation Transcript

  • 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 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: } }
  • 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
  • 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