AirConsole Game Dev Contest 2017

Discussion and feedback on Construct 2

Post » Tue Oct 18, 2016 2:37 am

BackendFreak wrote: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.

Code: Select all
    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

    });


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:

Code: Select all
<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
   * @return {Boolean}
   */
  function isMobile() {
    if (navigator.userAgent.match(/Android/i) ||
        navigator.userAgent.match(/iPhone/i) ||
        navigator.userAgent.match(/iPad/i) ||
        navigator.userAgent.match(/iPod/i) ||
        navigator.userAgent.match(/BlackBerry/i) ||
        navigator.userAgent.match(/Windows Phone/i) ||
        navigator.userAgent.match(/Opera Mini/i) ||
        navigator.userAgent.match(/IEMobile/i)) {
      return true;
    } else {
      return false;
    }
  };
</script>
</body>
</html>
www.simbucket.com - HTML5 Science Simulations / https://www.airconsole.com/#!play=com.n ... obotrumble - Robot Rumble on AirConsole
B
48
S
14
G
24
Posts: 406
Reputation: 16,660

Post » Tue Oct 18, 2016 1:43 pm

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.
B
7
S
1
Posts: 29
Reputation: 481

Post » Tue Oct 18, 2016 3:04 pm

Khelben wrote: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:

Image

First example is for particular player. Second is generic approach (in theory, I haven't tested this one).
ImageImageImage
B
27
S
16
G
80
Posts: 1,019
Reputation: 44,757

Post » Tue Oct 18, 2016 7:32 pm

@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.
B
11
S
3
G
1
Posts: 45
Reputation: 1,388

Post » Tue Oct 18, 2016 10:07 pm

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

Image

I don't have anything written in the textbox. How weird is that hé ?
B
7
S
1
Posts: 29
Reputation: 481

Post » Wed Oct 19, 2016 9:51 pm

maybe this question has its place in the help section forum :D
B
7
S
1
Posts: 29
Reputation: 481

Post » Sat Oct 22, 2016 3:56 am

@BackendFreak

I'm trying to do the platform movements with airconsole. But I find out that I might have to use custom movement to create the same platform movements (jump, go left, go right, double jump, etc.). Do you or anyone have any idea how to recreate the platform movements using custom movements?
B
11
S
3
G
1
Posts: 45
Reputation: 1,388

Post » Sun Oct 23, 2016 6:58 pm

Khelben wrote:Hey @backenfreak
Thanks for the answer yet I don't seem to be able to make it work :(. Here is how am trying this out

Image

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


@Khelben,

I'm seeing a problem triggering AirConsole events in Construct 2 as well. "On message is ____ and from _____" doesn't trigger if I am looping through all of the device IDs. Instead, I was able to detect the messages by using two System "Compare Two Variables" conditions, one to check AirConsole.DeviceID, and another condition to check AirConsole.message. I have attached a screenshot of the working event sheet below:

Image
www.simbucket.com - HTML5 Science Simulations / https://www.airconsole.com/#!play=com.n ... obotrumble - Robot Rumble on AirConsole
B
48
S
14
G
24
Posts: 406
Reputation: 16,660

Post » Mon Oct 24, 2016 6:58 pm

So scirra sends an email talking about this contest that you the C2 user are not able to participate on.
Music & Sound.
B
35
S
22
G
9
Posts: 47
Reputation: 7,822

Post » Mon Oct 24, 2016 7:03 pm

And please. No more "snippets".
Music & Sound.
B
35
S
22
G
9
Posts: 47
Reputation: 7,822

PreviousNext

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 15 guests