Making games and weird interactive experiences by hacking on old hardware is exciting, but can also be intimidating. How do you deal with physical hardware? How can you write and test things that run both on your home computer and on whatever weird hardware you’re working with? Writing cross-platform code is always a challenge, but what happens when “cross-platform” means something much further afield than desktop & mobile or browser & server? This talk hopes to demystify making cross-platform games and custom hardware games, showing how you too can easily make these sorts of games using JS!
Alessandro Terenzi (Inglobe Technologies) Developing AR Apps with the ARMedia...AugmentedWorldExpo
Similar to Mike Lazer-Walker - When “Cross-Platform” Is An Understatement: Making Weird Physical Games With Web Technology - Codemotion Berlin 2018 (20)
Mike Lazer-Walker - When “Cross-Platform” Is An Understatement: Making Weird Physical Games With Web Technology - Codemotion Berlin 2018
1. WHEN “CROSS-PLATFORM” IS AN
UNDERSTATEMENT
MAKING WEIRD PHYSICAL GAMES WITH WEB TECHNOLOGY
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
2. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
3. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
4. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
5. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
6. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
7. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
8. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
9. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
10. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
11. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
12. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
13. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
14. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
15. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
16. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
17. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
18. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
19. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
20. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
21. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
22. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
23. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
24. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
25. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
26. THE SOFTWARE
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
27. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
28. 1. “DOES THE CODE WORK?”
UNIT TESTS, CLI RUNNER
Mabel's light is blinking every 500ms.
> cable1R mabel
You plug column 1's rear cable into Mabel's jack.
> switch1R TALK
You switch column 1's rear switch to the "talk" position.
Mabel's light stops blinking.
You pick up the phone. Mabel says, "Hi! I'd love to talk to Ethel".
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
29. 2. "IS THE GAME FUN?"
IPAD-PLAYABLE GAME
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
30. 3. "IS THE GAME APPROACHABLE ON THE ACTUAL
HARDWARE? HOW'S THE DIFFICULTY CURVE?"
Actual Hardware
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
31. THE ADAPTER PATTERN
interface GameOutput {
function turnOnLight(caller: Caller);
function turnOffLight(caller: Caller);
function blinkLight(caller: Caller, rate: number) // Rate is in ms
function sayToConnect(call: Call);
function sayText(text: string, identifier: string) // Used for tutorial
}
interface GameInput {
function connect(cable: Cable, caller: Caller);
function disconnect(cable: Cable, caller: Caller);
function toggleSwitch(cable: Cable, state: SwitchState);
}
enum SwitchState {
case Neutral;
case Ring;
case Talk;
}
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
32. WHAT ARE "BEST PRACTICES"?
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
33. IT'S 2018. COMPUTERS ARE CHEAP.
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
34. SERENDIPITY OF WORKING IN A SINGLE
PLATFORM
# welcome
text: "Hello there! Thanks so much for agreeing to fill in today, I know
it's short notice. Let's teach you how to connect calls and use this
switchboard before it starts getting busy."
turnOnLight: Mabel
text: "Mabel wants to make a call. First, you have to connect to her. Take
any cable in the back row of cables and plug it into the hole below her
light. It doesn't matter which cable you use, as long as it's in the
back row."
<-> [connectWrongPerson exists]
text: Whoops! You want to connect to Mabel instead of {connectWrongPerson}.
allowRepeats
<-> [connectWrongCable exists]
text: Whoops! You want to use one of the cables in the row farthest away from you.
allowRepeats
<-> [toggleWrongSwitch exists]
text: Whoops! You don't want to touch the switches yet.
allowRepeats
-> first_switch: [Mabel.cable exists and Mabel.isFront is false]
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
36. @lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
37. NOT JUST FOR EMBEDDED ELECTRONICS!
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
38. function handleIntent(intent: Intent, state: Session, output: Output): Promise<Session>
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
39. ...BUT WHY DO ALL OF THIS?
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
40. PHYSICALLY INTERACTING
WITH THE HISTORY OF
TECHNOLOGY IS A GREAT WAY
TO LEARN ABOUT IT
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
41. THE WAY PEOPLE INTERACT
WITH SYSTEMS AFFECT THEIR
RESPONSE TO THEIR SYSTEM
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
42. EXPOSURE TO OTHER FORMS
OF ENGINEERING IS USEFUL
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike
43. MORE COOL THINGS IN THE
WORLD
@lazerwalker · CodeMotion Berlin 2018 (20 November 2018) · Creative Commons Attribution-NonCommercial-ShareAlike