Don't Lose Your Marbles

Introduction

Don’t Lose Your Marbles is a physics puzzle game for one or two players. In it, players will control a set of blocks, force fields and automated contraptions to keep marbles from rolling off of the table. Each level will have different fixed and variable obstacles with marbles and steel balls that are launched onto the table. Using a combination of touch and on-screen joysticks, strikers and dice, the players must get all the colored balls into their final destinations.

An example of this on the project on the Lenovo Horizon 27” All-in-One. Note the placement of the magnetic field which is determined by the placement of the Striker.

Background

The latest round of computer hardware in 2013 has opened up a completely new world for applications. The most notable is probably the Haswell architecture which will promise battery life for PCs that were previously only seen with tablets. But this is not the only innovation that has occurred, screen sizes have increased, touch has become ubiquitous and new devices are being released.

Lenovo has recently introduced a revolutionary device in the All-In-One space, the Lenovo Horizon 27" All-In-One. This device has a number of features that make it a unique entry:

• 27" All-In-One and Tablet Convertible
• On Screen Joystick
• On Screen Striker
• On Screen Dice

Each of these items opens up a new mechanism for interacting with computers in a more human way. The complete benefits of these new Human Interface Devices (HIDs) will not be completely realized until applications are written to take advantage of them.

Features and Benefits

27" Tablet

While tablets have been in the mainstream for around five years, they have been designed as personal devices. That is, they could be shared, but only by passing the device around. With the large screen size offered by this device, it is easy for two people across a table to interact with the device at the same time. It is even large enough for four people to sit around it at a small table. The drive to social networking is undeniable and this provides a new way to be social with a computer.

On-Screen Joystick

There are a number of games and control systems that work more naturally with a joystick interface. While touch has opened a large number of gesture based inputs, it still makes sense for some applications to use a joystick for input. This has been demonstrated on many games titles, such as Max and the Magic Marker, that implement a Virtual D-Pad; an on-screen touch version of a joystick.

However, there is more to this technology than just having a joystick. The joystick control may also be placed on the screen in different locations. This allows the inputs from the joystick to be context-sensitive to the location on the screen.

On-Screen Striker

Who hasn’t enjoyed the tactile feel of an air hockey striker in the hand? While it acts similar to a mouse pointing device, the feel is distinctly different. Where a mouse encourages the fingers to make fine movements, the striker is held by the hand and encourages harder and faster gestures. It is no wonder that this basic joy has been released with the device as Lenovo Air Hockey.

E-Dice

The humble dice have been long since replaced by electronic replacements in many computer games. However, the dice still provides a feeling of turn ownership and while the random numbers generated by dice might be worse than a good computer algorithm, there is inherent faith that the dice are true. Some games, like Monopoly, just feel right when the dice are being rolled.

Approach

I’ve had the idea for a marble based, physics game for several years. This started when I was at the Denver Children’s Hospital and saw a Marble Run style sculpture in their lobby (video on YouTube).

I’ve toyed with the idea of turning this into a 2D game and have had many great ideas. The problem with it as a game concept was that it had poor human interaction. It basically became a subset of a Rube Goldberg style game like Crazy Machines.

However, the ability to interact with the board in many different ways as provided by the Lenovo Horizon 27” All-In-One has re-inspired me to create a game in this space. The key elements of the game are:

• Top Down View of a table full of marbles
• Marbles leaving the screen fall off the table (with a satisfying thud)
• Ability to directly manipulate table objects with touch
• Ability to drive table mechanics with relocatable joystick
• Ability to add forces to table using striker, such as a magnet that attracts steel balls
• Ability to change striker’s power-up randomly with dice
• Single and cooperative multiplayer modes

The game will be built on top of a proprietary C#, XAML-based WPF game engine developed for ‘Roid Rage that uses the Farseer physics engine. Since the primary goal of this game is to demonstrate the ability to use these controls, several game mechanisms will not be implemented, such as high scores, achievements, experience points, roaming profiles, sharing, network based multiplayer, etc. If the overall gameplay is successful, the game may be expanded into each of these areas.

To meet the timelines of the contest, it will be necessary to focus on the minimum viable product, which is expected to include:

• Single lobby screen offering volume control and options for single player levels or cooperative multi-player levels.
• Level selection screen to select a specific level.
• Ten single player levels, each designed to use multiple controls.
• Ten cooperative multiplayer levels, designed to require the simultaneous manipulation of three or more game areas.

The game engine is an XAML based engine that uses Ellipses and Rectangles embedded within a Sprite control for physics and collision detection. The bodies for the physics engine are each XAML based User Controls. As such, each level is designed using Expression Blend. This makes the levels a design task and not a programing task, reducing the time to develop.

The key development efforts will be in expanding the engine to recognize the new input devices that are unique to the Horizon.

Game Mechanics

The game mechanics are designed to emulate a simple challenge of keeping marbles and steel balls from rolling off of a table. Blocks are available on the table that can be placed in the path of the balls to make them bounce towards their goal. In advanced levels, balls must be sorted into multiple areas requiring controls that act differently based on the type of ball. For example, the magnet affects the path of steel balls but not glass balls. Interaction with the game is a combination of traditional tablet touch and inputs optimized for the unique capabilities of the Horizon.

Touch

On the table will be wooden blocks that can be moved around using touch. They will react by moving when hit. When held with a single finger they will pivot around that point. When held by two fingers they will be fixed objects. This will feature in the early levels and will be less important as players are transitioned to other input mechanics.

Joystick

The joystick control will be used to manipulate fixed barriers that move both in sync with the joystick. The first type of control will be manipulated into place with the joystick and will be stationary afterwards, that is, the joystick controls velocity. This motion is like the crane arm of “the claw” in Toy Story. Later levels will have direct feedback between the joystick and an object, that is, the joystick controls position. This is like the control between steering wheel and car.

Striker

The striker will control powers that are available on a per-level basis. This could be a gravity well that attracts balls, a magnet to attract only metal balls, or several other mechanism. This will, for example allow the sorting of metal balls from glass balls. The available control for the striker will be listed in a special area of the table. This will tie in with the dice.

Dice

Dice in the game will allow the random selection of the striker.

The joystick and striker can be seen in the above game mock-up, where the joystick is controlling the entering of the balls and the striker is causing a magnetic field on the board to separate the steel balls.

About the Code

While this article is about a game that I intend to write for this platform, it just wouldn’t be the Code Project without some code. So, the engine that I’ve developed uses XAML for sprite controls, which adds some substantial benefits over typical game engine sprites. While it is less efficient than its XNA or Unity brethren, it allows for the use of Expression Blend for the design of sprites and levels. It is similar in design to the Physics Helper XAML project but was developed independently.

Sprites in this engine are XAML controls which allows a sprite to have changing visual effects and animations as long as the physics body of the sprite doesn’t change. For example, the ship sprite in ‘Roid Rage consists of the following layers:

	Thrust: When the ship is flying, the image of the thrust is displayed. To display this, the opacity of the thrust is set to 1.0 and all of the appropriate transforms to display it in proximity to the ship are handled automatically.
	Ship: The ship itself is displayed all the time, it is layered over the thrust.
	Shields: When the shields are active, the shields are displayed. This is a path instead of an image and the gradient fill of this path is animated to make the shields look active.
	Physics Body: The physics for the ship is defined by a set ellipses which define the collision boundaries and are used to calculate the center of rotation of the ship. These are not displayed at runtime except in a special debug mode. The game engine parses the control’s logical tree at initialization to determine this location.
	Overlaid: The overlaid images shows all of the elements together.

The benefit to this solution is that Expression Blend can be used to create the visuals for the sprite, overlay the physics body and dynamically change visualization based on view state or through an animation.

The XAML for the ship control is defined as follows. Each of the above visuals can be identified within the Canvas layout root.

<UserControl x:Class="MeteorMadness.Controls.Ship"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="100" Height="54">
	<UserControl.Resources>
		<Storyboard x:Name="AnimateShield">
			<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Shield" RepeatBehavior="Forever">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
    </UserControl.Resources>
    <Canvas x:Name="LayoutRoot" Background="Transparent" >
        <Image x:Name="ThrustImage" Source="ms-appx:///Controls/Ship/Thrust.png" Opacity="0.0" Width="100" Height="54" />
        <Image x:Name="ShipImage" Source="ms-appx:///Controls/Ship/Ship.png" Width="100" Height="54" />
        <Ellipse Height="23" Canvas.Left="34" Stroke="Green" Width="23" Canvas.Top="3" />
        <Ellipse Height="23" Canvas.Left="34" Stroke="Green" Width="23" Canvas.Top="28" />
        <Ellipse Height="23" Canvas.Left="28" Stroke="Green" Width="23" Canvas.Top="15" />
        <Ellipse Height="13.5" Canvas.Left="75" Stroke="Green" Width="13.5" Canvas.Top="20" />
        <Ellipse Height="23" Canvas.Left="50" Stroke="Green" Width="23" Canvas.Top="15" />
        <Ellipse Height="15" Canvas.Left="65" Stroke="Green" Width="15" Canvas.Top="19" />
        <Path x:Name="Shield" Data="M38.1255,51.5381 37.0005,38.789 27.2504,35.0393 27.3754,18.6655 37.2505,14.2907 38.2505,0.916666 54.3756,1.66661 57.7506,13.0408 69.3757,14.2907 71.0007,17.0405 82.0008,19.7904 90.1259,23.7901 90.1259,28.7897 81.8758,33.1644 71.1258,35.9142 69.8757,39.164 58.2506,39.789 54.5006,51.5381 z" Height="51.625" Canvas.Left="26.75" Stretch="Fill" Stroke="Transparent" Canvas.Top="0.75" UseLayoutRounding="False" Width="63.875" Opacity="1.0">
        	<Path.Fill>
        		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        			<LinearGradientBrush.RelativeTransform>
        				<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="36.87"/>
        			</LinearGradientBrush.RelativeTransform>
        			<GradientStop Color="#7F0A4F17" Offset="0.328"/>
        			<GradientStop Color="#BF67E47E" Offset="1"/>
        			<GradientStop Color="#BF67E47E" Offset="0.009"/>
        			<GradientStop Color="#7F0A4F17" Offset="0.668"/>
        		</LinearGradientBrush>
        	</Path.Fill>
        </Path>
    </Canvas>
</UserControl>

One item that was especially nice was the creation of the shields. Once the image of the ship was added to the control, it was a simple matter of tracing a path around the image using the Expression Blend path control (the fountain pen icon). The fill was similarly implemented in Blend, so that all of the verbose details within the Path tag were all created using a designer.

The sprite control, then has some properties associated with it to enable abstracted access to these visualizations. In particular, Thrust and Shields properties make the thrust and shields visible and in the case of the shields also plays the appropriate animation.

public partial class Ship {
    public Ship() {
        InitializeComponent();
    }

    public bool Thrust {
        get {
            return thrust;
        }
        set {
            thrust = value;
            ThrustImage.Opacity = thrust ? 1.0 : 0.0;
        }
    }
    private bool thrust;

    public bool Shields {
        get {
            return shield;
        }
        set {
            shield = value;
            if(value) {
                Shield.Opacity = 1.0;
                AnimateShield.Begin();
            }
            else {
                Shield.Opacity = 0.0;
                AnimateShield.Stop();
            }
        }
    }
    private bool shield;
}

Future

Currently the game engine is complete and running in the Windows application ‘Roid Rage. It will need to be extended for the HID enhancements of the Lenovo Horizon and the levels will need to be authored. The style of game has been intentionally chosen to reduce the amount of work that needs to be done above and beyond existing source control while still being able to product a visually appealing game. A release will be made with a minimum subset of functionality.

Moving beyond the contest, there is room for several worlds of fifteen levels each to be created as well as further gamification such as experience points and achievements. For devices without the HID improvements of the Horizon, visual elements such as a virtual D-Pad could be added at the appropriate areas.

History

2013-08-19 Original Intel App Innovation Contest 2013 Submission