Cjbruce's Profile

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

18 Oct, 2016
Quote

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]

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

16 Oct, 2016
Quote

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

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
2

3 Jun, 2016
Quote

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.

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

8 Mar, 2016
Quote

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.

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

26 Feb, 2016
Quote

bhain7,

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

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

22 Nov, 2015
Quote

> 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.

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

12 Mar, 2015
Quote

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!

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

12 Mar, 2015
Quote

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!

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

12 Mar, 2015
Quote

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!

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

9 Mar, 2015
Quote

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:

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

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

17 Feb, 2015
Quote

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]

cjbruce
- Joined 25 Apr, 2013
- 30 topics • 500 posts
1

12 Feb, 2015
Quote

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 Recent Forum Activity

Try Construct 3

cjbruce

Connect with cjbruce

Trophy Case

Progress

Your Location

Products

Construct 3

Education

Affiliates

Our Company

Community

Scirra Ltd

Legal