cjbruce's Recent Forum Activity

  • 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
   * @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>[/code:2ca33ac9]

  • Yes you need to do some coding in order to prepare the controller. But for most of controllers (I mean depends how fancy you want to make it) it's just a bit of coding. AirConsole also has a controller generator which helps to prepare standard buttons, joystics etc.

    What I was doing in my AC game, was simply sending the C2 Dictionary JSON from controller to the game itself and read that as a message in C2 project. Then based on Dictionary data I was performing some action.

    Here's the small code snippet to give a better understanding.

    > /** Start SCREEN BUTTONS **/
    var startScreen_readyButton = new Button("ready-button", {
        "down": function () {
            airconsole.message(AirConsole.SCREEN, {
                "message": '{"c2dictionary":true,"data":{"action":"player_ready"}}'
            });
        },
    });

    var startScreen_creditsButton = new Button("credits-button", {
        "down": function () {
            airconsole.message(AirConsole.SCREEN, {
                "message": '{"c2dictionary":true,"data":{"action":"goto_credits"}}'
            });
        },
    });
[/code:2v8uoy08]

So as you can see I'm just sending here "player_ready" or "goto_credits" string, depends on which button has been clicked on controller. You can even optimize it to send only this string instead of the whole dictionary JSON and then wrap it in C2 after fetching the string.

    Has anyone had any success getting the output of the joysticks to work as a C2 dictionary string? I'm looking to do dual analog joystick control, but the generated code creates a nested javascript object as output:

    {joystick-left: {pressed: true, message: {x: 0.8376799158253391, y: -0.5461614766924299}}}

  • Xeeko,

    System>Reset Global Variables to Default might be what you are looking for

    I've only seen demos of Fusion, but it looked to me like the people running the demo (a high school teacher and her student) used a lot of global variables. I try to stay away from global anything as much as possible in C2 because it can make troubleshooting very difficult. The exception to this is "included" event sheets, which have been really helpful for my latest project.

    As for Layouts/Event Sheets, if you duplicate a layout, the duplicated layout will use the previous event sheet, which you then need to reassign to a new event sheet. If you create a new layout from scratch, it will prompt you whether or not you want to create a new event sheet to go with it. In my current project, I have found that it is easiest to duplicate the layout, then create a new event sheet in the event sheet sidebar.

  • I would love to see a Chromebook-able version of Construct 2, but I can't see it happening anytime soon. Most of the students in the Chicago suburbs have either a school-issued iPad or a school-issued Chromebook, and Construct 2 happens to be (IMHO) the best tool for making web-ready games and simulations that run on these devices. It would be awesome to give all of our students the ability to make games, but the cost of the mobile devices also means that we are getting rid of our real computers.

  • bhain7,

    Thanks for the tutorials! It appears that 3dswing.com is down.

  • > Check out . All 40+ science simulations on the site were made with Construct 2 by a group of physics teachers (and one AP Biology teacher).

    >

    > Our team loves Construct 2!

    >

    Hi I'm also teacher and wanna create such simulations and interactive applications like yours

    What's your advices and whats the begining point in order create such applications any tutorials or readings

    thank you

    I'm not sure what sort of background you have, but maybe the best place to start would be to come up with an idea and try to build it! Kyatric has some great Construct 2 youtube training videos that helped me understand picking in Construct 2. Understanding how picking works is really important when you are putting lots of instances of the same object onscreen.

  • lennaert,

    I think you are right. I'm not sure why I didn't think of that, but I will give it a shot.

    Thanks for the help!

  • I'm looking to build an app that resides inside an iframe on a larger webpage. I would like to handle user authentication on the larger webpage, and then pass the username/password to the Construct 2 app in the iframe when it loads.

    I was considering the following possibilities:

    1. Store the authentication information as a php session variable, then modify the Construct 2 index.html to become index.php and load the username and password as javascript variables.

    2. Pass the authentication information via a GET request to the Construct 2 index.html (renamed as index.php) and load the username and password as javascript variables.

    In either case, I need to somehow create a javascript variable that Construct 2 will recognize in-game.

    Any ideas? Can this even be done?

    Thanks for your help!

  • chaoskool32, welcome to the forums!

    In addition to the having the ability to enter text, you will need to consider what needs to be done with the text after it is entered. If you need the ability to send the information from the teacher's device to the students, then you will need a lot more infrastructure:

    1. Use the "AJAX" object in Construct 2 to send the questions to a server.

    2. You will need a server running a server-side language like php to communicate with teacher and student devices. In addition, the server will need a database running mysql or similar to store and retrieve the questions.

    3. You will need to build a student version of the app to poll the server and display the questions. The student version will use the "AJAX" object in Construct 2 to retrieve the questions from the server.

    If you don't do this, then the teacher will need to type in all of the information into their device/computer, then give that device/computer to the student to use. This might be a little weird, depending on how the class is set up.

    I'm a teacher who is up to my eyeballs in all of this at the moment. If you have any questions, please feel free to PM me. Good luck, and happy Constructing!

  • septeven, thank you for the wonderful plugin. It is allowing me to make a professional-looking app without trying to build tables in Javascript.

    I'm having trouble styling the cells to word wrap correctly. I would like to be able to display multiple lines of text, but no matter what I try I only get a truncated line. Here is my most recent attempt at putting a <div> into an iscroll line:

    <div style='float:left;width:700px;word-wrap:break-word;'></div>

    Am I missing something here, or is it not possible to wrap text?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I would like to use the canvas plugin to create an image editor. My .capx does the following:

    1. Load an image (.png or .jpg) to a sprite using the FileChooser plugin.

    2. Move the sprite/resize it.

    3. Paste the sprite into a canvas.

    4. Use Canvas.imageURL to Base64 encode the contents of the canvas.

    4. Upload the Base64 encoded image to a webserver.

    Everything works fine for .png files loaded from a local directory, but I can't seem to Base64 encode the canvas if I start from a large .jpg file instead. Does anyone have any ideas for what I might be doing wrong?

    Here is my .capx file:

    [attachment=2:2pvy7d92][/attachment:2pvy7d92]

    Here is a correctly Base64 encoded .png file:

    [attachment=1:2pvy7d92][/attachment:2pvy7d92]

    Here is an incorrectly Base64 encoded .jpg file:

    [attachment=0:2pvy7d92][/attachment:2pvy7d92]

  • I should have posted this long ago when we completed the first few simulations, but I suppose it is better late than never:

    http://www.simbucket.com now has over 40 free simulations and games for science students!

    Inspired by the great free collection of Java/Flash simulations at http://phet.colorado.edu, we have found that Construct 2 is a natural fit for physics simulations. We hope you find them useful. Enjoy!

    Sincerely,

    Chris Bruce

    for the Conant High School Physics Teaching Team

cjbruce's avatar

cjbruce

Early Adopter

Member since 25 Apr, 2013

Twitter
cjbruce has 4 followers

Connect with cjbruce

Trophy Case

  • 11-Year Club
  • Forum Contributor Made 100 posts in the forums
  • x3
    Coach One of your tutorials has over 1,000 readers
  • Educator One of your tutorials has over 10,000 readers
  • Regular Visitor Visited Construct.net 7 days in a row
  • RTFM Read the fabulous manual
  • Email Verified

Progress

17/44
How to earn trophies