AirConsole Game Dev Contest 2017

I just can't believe there is a contest for C2 "devs" and there is not a propper tool kit for it. Just a link with "snippets" of information done by sombody not involved with airconsole.

The point is that it's not a contest dedicated for C2 devs. It's more dedicated to Unity developers. Construct 2 is not ready yet to work with AirConsole by itself. There's no "export to AirConsole" option nor any good AirConsole C2 plugin. But it is still possible to make AC games using C2 + Java Script. That's why I thought it's worth to mention this game jam here.

I have a question that I hope someone might be able to answer... If a device connects, the trigger event is as I would expect. However, if a device disconnects, the trigger event asks you for the id of the device you are checking for. This seems a little recursive... Am I correct to load the trigger expression as below?

<condition name="On device left" type="AirConsole">
                            <param name="DeviceID">AirConsole.DeviceIDLeft</param>[/code:373xg6yg]

Thus the trigger will check against the device id that triggered the trigger...? 

Thanks.

Edit - very early stages of looking into this and I have nothing to test yet.

This is a generic approach which should work I think (if it returns the correct ID - I haven't tested this one). Basically after each controller joins the screen you save "AirConsole.DeviceIDJoin" to some variable/array. Something that will become this particular player's handler.

Then when player disconnects you may put this variable as a param of condition "On device disconnects". This way you can take proper action when a particular user diconnects.

Thanks — - that what I suspected too, although I haven't tested it - I was hoping that the trigger would simply return an expression for the leaving device's id, rather than you have to check for a specific id in the trigger itself. Given that these ids cannot be known beforehand, I feel like it'll make for some clumsy events (however, my caveat is I haven't actually tested it yet).

I was looking through the plugin and noticed that DeviceIDLeft in the edittime is a number, but the returned value from the runtime is a string. Possibly an error? Or am I just misunderstanding it?

I'm still reading through the controller setup info, but returning c2 json messages is definitely the way to go.

Thanks — - that what I suspected too, although I haven't tested it - I was hoping that the trigger would simply return an expression for the leaving device's id, rather than you have to check for a specific id in the trigger itself. Given that these ids cannot be known beforehand, I feel like it'll make for some clumsy events (however, my caveat is I haven't actually tested it yet).

I was looking through the plugin and noticed that DeviceIDLeft in the edittime is a number, but the returned value from the runtime is a string. Possibly an error? Or am I just misunderstanding it?

I'm still reading through the controller setup info, but returning c2 json messages is definitely the way to go.

You have to store the ID of each player anyway in order to handle player's actions. This id determines which action is comming from which player (and the other directions as well).

Yes, but if I have 8 players (ambitious!) max, then with this setup I will need 8 trigger condition events. I would rather have just one and then action according to id afterwards. Unless my code above works then it'll be impossible to do any other way than with multiple triggers (because AC site says that id numbers are assigned on connection and may not be predicted).

If I can get a test running this weekend then I'll have a hack around in the plugin to see what's going on.

New challenge: You plugin developers develop a plugin that adds airconsole functionality into CS2 w/o the scripting hassle and add it to the scirra store for a reasonable value point and us non-coders will pay you back.

I don't care about the contest but it looks like a really fun system to develop games to use with family and friends.

It's good to be me

Yes, but if I have 8 players (ambitious!) max, then with this setup I will need 8 trigger condition events. I would rather have just one and then action according to id afterwards. Unless my code above works then it'll be impossible to do any other way than with multiple triggers (because AC site says that id numbers are assigned on connection and may not be predicted).

I'm pretty sure your generic approach will work. I use the same trick for IAP's and other plugins and it works fine. I mean that the data is already available on condition trigger and you can use it as a condition parameter.

New challenge: You plugin developers develop a plugin that adds airconsole functionality into CS2 w/o the scripting hassle and add it to the scirra store for a reasonable value point and us non-coders will pay you back.

Yeah would be good. It's absolutely doable. Just need to add few functions to the plugin. I almost get it working back in March when there was previous game jam. But not many people from C2 were interested in AC at all. Scirra and AirConsole didn't seem to be keen to cooperate that time as well so I dropped this experiment as I had my freelance tasks to do. But now it looks like Scirra and AirConsole finally got interest in each other so hopefully we won't need any hacks in near future and instead we'll have built-in export options and valid plugin. Fingers crossed

am sorry if my questions are stupid but can someone pls tell me how I am supposed to read the messages ?

Using "{""c2dictionary"":true,""data"":{""1"":2}}" ?

from this msg for instance : "message": '{"c2dictionary":true,"data":{"action":"joystick_move","x":' + position.x + ',"y":' + position.y + '}}'

There you go. I was planning to make some tutorials for C2 and AirConsole, but really can't find the time recently so hopefully some code snippets will help you a bit.

    var gameplayScreen_joystick = new Joystick("joystick", {

        "touchstart": function () {
            airconsole.message(AirConsole.SCREEN, {
                "message": '{"c2dictionary":true,"data":{"action":"joystick_start"}}'
            });
        },

        "touchmove": function (position) {
            rateLimiter.message(AirConsole.SCREEN, {
                "message": '{"c2dictionary":true,"data":{"action":"joystick_move","x":' + position.x + '}}'

            });
        },

        "touchend": function (had_direction) {
            airconsole.message(AirConsole.SCREEN, {
                "message": '{"c2dictionary":true,"data":{"action":"joystick_stop"}}'
            });
        },

        "distance": 90,
        "min_delta": 0.01

    });[/code:2ca33ac9]

Thanks for the help on this!

Right now I'm demoing the project with regular <button> tags created by hand. I'll take a crack at modifying the files in "airconsole-controls" maybe later this week.

So far I have the following for the controller.html file. My students have enjoyed driving little tanks around onscreen with it:

<html>
<head>
  <!--<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>-->
  <meta name="viewport" content="user-scalable=yes"/>
  <style type="text/css">
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body {
      background-color: #222;
    }
    button {
      margin-bottom: 1px;
      width: 48%;
      height: 48%;
      border: 0;
      box-sizing: border-box;
      font-size: 40px;
      color: #FFFFFF;
      background-color: #333333;
      outline: none;
    }
  </style>
</head>
<body>
<div style="width:100%;float:left;">
<button id="leftup">UP</button>
<button id="rightup">UP</button>
</div>
<body>
<div style="width:100%">
<button id="leftdown">DOWN</button>
<button id="rightdown">DOWN</button>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.3.0.js"></script>
<script type="text/javascript">

  var air_console = new AirConsole();

  // Let the screen know we are here
  var sendHandshake = function() {
    air_console.message(AirConsole.SCREEN, {
      handshake: true
    });
  };

  air_console.onReady = function() {
    sendHandshake();
  };

  air_console.onMessage = function(device_id, data) {
    if (data.handshake) {
      sendHandshake();
    }
  };

  var down_event = isMobile() ? 'touchstart' : 'mousedown';
  var up_event = isMobile() ? 'touchend' : 'mouseup';

  $("#leftup").on(down_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'leftup'
    });
  });

  $("#leftdown").on(down_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'leftdown'
    });
  });

  $("#leftup").on(up_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'leftstop'
    });
  });

  $("#leftdown").on(up_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'leftstop'
    });
  });

  $("#rightup").on(down_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'rightup'
    });
  });

  $("#rightdown").on(down_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'rightdown'
    });
  });

  $("#rightup").on(up_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'rightstop'
    });
  });

  $("#rightdown").on(up_event, function () {
    air_console.message(AirConsole.SCREEN, {
      message: 'rightstop'
    });
  });

  /**
   * Returns true if device is a mobile device
   * 
— {Boolean}[/p]
   */[/p]
  function isMobile() {[/p]
    if (navigator.userAgent.match(/Android/i) ||[/p]
        navigator.userAgent.match(/iPhone/i) ||[/p]
        navigator.userAgent.match(/iPad/i) ||[/p]
        navigator.userAgent.match(/iPod/i) ||[/p]
        navigator.userAgent.match(/BlackBerry/i) ||[/p]
        navigator.userAgent.match(/Windows Phone/i) ||[/p]
        navigator.userAgent.match(/Opera Mini/i) ||[/p]
        navigator.userAgent.match(/IEMobile/i)) {[/p]
      return true;[/p]
    } else {[/p]
      return false;[/p]
    }[/p]
  };[/p]
</script>[/p]
</body>[/p]
</html>[/code:2ca33ac9]

Yeah that's the button demo from Airconsole. It works fine tbh.

Still, I do have this remaining question... how do I read this in c2 ?

"message": '{"c2dictionary":true,"data":{"action":"joystick_start"}}'

or this

"message": '{"c2dictionary":true,"data":{"action":"joystick_move","x":' + position.x + '}}'

If someone could explain I will try and make a tutorial video about it to share if you have no time to do so.

Yeah that's the button demo from Airconsole. It works fine tbh.

Still, I do have this remaining question... how do I read this in c2 ?

"message": '{"c2dictionary":true,"data":{"action":"joystick_start"}}'

or this

"message": '{"c2dictionary":true,"data":{"action":"joystick_move","x":' + position.x + '}}'

If someone could explain I will try and make a tutorial video about it to share if you have no time to do so.

You have to load it to some Dictionary and then you can read from it. Like below:

First example is for particular player. Second is generic approach (in theory, I haven't tested this one).

ishmaelmoreno

For some reason it does not work with "https". I installed a local webserver and it worked with "http". Now I'm making my game and is going pretty good. But I have to say that trying to test with the simulator is not 100% functioning correctly.

But thanks for helping me.

Hey —

Thanks for the answer yet I don't seem to be able to make it work . Here is how am trying this out

I don't have anything written in the textbox. How weird is that hé ?