Explore the samples

This section provides an overview of the main functionality available in each sample application, and which key concepts of the PureWeb APIs come into play when implementing these features.

A few notes about using the samples in collaboration mode:

  • Cookie sharing between browser tabs may cause issues. If you want to open two sessions of the same application, we recommend that you use two separate browser instances, or use your browser's incognito or private browsing option if it has one.
  • In the HMTL5 client, if you keep the popup window that contains the share URL open for more than a few seconds, the client will disconnect. This is because, in an effort to keep the sample generic by not using any third-party libraries, the dialog box is not created using CSS overlays. For more information, on why using CSS overlays would be best practice, see Modal Dialogs in HTML5.

Scribble

Scribble is a simple canvas which allows users to draw, change pen color, and erase drawings.

 

Basic functionality

  • To draw: click the mouse and drag (or use touch gestures on a mobile device).
  • To erase the current drawing: this depends on the client; you can either click or tap the relevant button, or choose the relevant option from the menu.
  • To change the pen color: this depends on the client; you will either select a color from a drop-down list (in Android you will need to go to the menu first), or type a new color in a text field.
  • To display the Diagnostics Panel (assuming the client was launched with the panel enabled):
    • HTML5 or Flex: Click the small arrow button located in the upper-left corner of the client window.
    • iOS: Tap the Diagnostics button in the top right-hand corner.
    • Android: The Diagnostics Panel is not available in the Android sample clients.
  • To work in collaboration mode:
    • As the host, get the share URL (either click or tap the Share button, or select Share from the menu, depending on the client), then provide this URL to those you are inviting to the session.
    • As an invited user, simply navigate to the provided URL, which will display a login page. Select a preferred client (all possible clients are listed, but only the clients that have actually been built will work), and enter the share password (Scientific).

The Scribble canvas is an example of a view. PureWeb automatically captures user input events in this view, and the drawing effect is obtained by handling the user input. You may notice also that the quality of the images sent while drawing is lower than when not drawing, this is achieved by providing different encoding configurations for the interactive and non-interactive modes; see fine-tuning the image encoding for more detail.

The erase functionality is achieved using a simple command. The pen color is stored in application state.; in particular, state change handlers are used to monitor and respond to changes to the color.

The Scribble collaboration functionality (the Share button) is an example of the default built-in collaboration feature.


Asteroids

Asteroids is an implementation of the classic video game with a twist -- it supports both single-player and two-player modes; each player independently controls his or her own ship.

In Single-Player Mode

Press any key, or touch the screen, to start the game. You will play as an anonymous user, unless you explicitly change this using the Set name option.

To collect points, collide with an asteroid with your shields up to destroy the asteroid.

  • To move forward/reverse:
    • HTML5: use the up/down arrow keys.
    • iOS: press/hold the circle up or down.
    • Android: tap the up/down buttons (or press the up/down keys if using a simulator).
  • To change heading:
    • HTML5: use the left/right arrow keys.
    • iOS: press/hold the circle left or right.
    • Android: tap the left/right buttons (or press the left/right keys if using a simulator).
  • To fire torpedoes:
    • HTML5: press the space bar.
    • Mobile: press the ship icon.
  • To activate shields (each player gets 5 seconds of shield time per game):
    • HTML5: press the S key.
    • Mobile: press the shield icon

In two-player mode

To set up the collaboration mode:

  • Player 1 gets the share URL (either click or tap the Share button, or select Share from the menu, depending on the client), then provides this URL to the second player.
  • Player 2 simply navigates to the provided URL, which will display a login page. Select a preferred client (all possible clients are listed, but only the clients that have actually been built will work), and enter the share password (Scientific).

In addition to the functionality available in single player mode, the following is available in two-player mode:

  • Collide with an unshielded opponent with your shields up to destroy their ship and collect all of their points.
  • Collide with a shielded opponent with your shields up to create an elastic collision.
  • Shoot and kill an unshielded opponent to collect all his or her points.

Other features

In the HTML5 client only, the following features are also available:

  • Monitor the number of frames per second in the FPS field.
  • Display the Diagnostics Panel (assuming the client was launched with the panel enabled): click the small arrow button located in the upper-left corner of the client window.

The main window where users play the game is an example of a view. Whenever users interact with this view (change the heading, fire torpedoes, and so on), PureWeb automatically captures the input events, and the resulting navigation is obtained by handling the user input. Note that on mobile devices, the touch gestures are translated into keyboard events.

The option to set the player name is using a simple command.

Whenever the player progresses to a new level, the background image changes. The player level is stored in application state., and state change handlers are used to monitor and respond to changes in level reached.

The Asteroids service application relies on session IDs to determine whether to run in single-player or two-player mode; this is an example of how to extend the collaboration functionality beyond what's provided by default in the built-in feature.


Source code

When you are ready to dig into the source code for the samples, you will find the files at the following paths in the directory where you installed PureWeb.

C++: SDK|Samples|Scribble|[ScribbleAppcpp or ScribbleAppQt]

C#: SDK|Samples|Scribble|ScribbleAppCsharp

Java: SDK|Samples|Java|src|server|pureweb|samples

HTML5: SDK|Samples|[Asteroids or Scribble]

iOS: The PureWeb Framework is deployed through CocoaPods. You can find the Framework in the Pods project.

Android: SDK|Samples|Android
There is one subfolder for Scribble, one for Asteroids, and a pureweb subfolder for the code common to both applications.

Flex: SDK|Samples|Scribble|ScribbleClientFlex