PHP – If statements

Most programming languages provide a conditional statement of some kind. PHP provides an if then else, the syntax of which is very similar to Javascript and other languages. In PHP the if statement has a few extra features.

Let’s start with the basic if statement.

if ( condition ) {
  // code block
}

Here if the condition is  evaluated to true the code block is executed. You can add an alternative code block that will be executed if the condition is evaluated to false.

if ( condition ) {
  // code block true 
} else {
  // code block false
}

Here the the second code block is executed when the condition is false.

Here’s a couple real world examples.

<?php 
  if ( isset($_GET['category']) ) {
    echo $_GET['category'];
  }
?>

In this example if the variable $_GET[‘category’] has been set the value is printed to the page.

We can add an else to this:

<?php 
  if ( isset($_GET['category']) ) {
    echo $_GET['category'];
  } else {
    echo "Category not set";
  }
?>

Here if the $_GET[‘category’] variable is set, then it is printed to the page, otherwise (else) the message “Category not set” is printed instead.

Since PHP is an html embedded language you will often find that you want to print HTML and other text to the page as part of the if and else. Using echo is okay in some cases. Fo example:

<?php 
  if ( isset($_GET['category']) ) {
    echo "<p>" . $_GET['category'] . "</p>";
  } else {
    echo "<p>Category not set</p>";
  }
?>

In other cases the situation gets more complex. For example imagine that you are check if someone is logged in, and if not you want to display a form:

<?php 
  if ( isset($_GET['loggedin']) ) {
    echo "<p>Logged in:" . $_GET['username'] . "</p>";
  } else {
    echo "<form>
<input type='text'>
...
</form>";
  }
?>

Printing the form using echo is awkward. I didn’t write the entire form above, use your imagination, it can get a little ugly; worst of all everything is inside the quotes so you don’t get any color coding or other help from you editor.

In these cases there is a better way. PHP allows you to close PHP and reopen the PHP tag anywhere. Here’s an example:

<?php 
  if ( isset($_GET['loggedin']) ) {
    echo "<p>Logged in:" . $_GET['username'] . "</p>";
  } else {
    ?>
<form>
<input type='text' name='username'>
<input type='password' name='password'>
<input type='submit' name='submit'> 
</form>
  <?php } ?>

Here we exit PHP after the else statement, so the form can be written as standard HTML. Not that that the if statement has the it’s complete syntax within the <?php ?> tags. The lone } looks a little odd inside of <?php ?> on the last, but this completes the syntax so everything is okay.

Alternately you could write the same statement above with this alternate syntax.

<?php 
  if ( isset($_GET['loggedin']) ) :
    echo "<p>Logged in:" . $_GET['username'] . "</p>";
  else:
    ?>
<form>
<input type='text' name='username'>
<input type='password' name='password'>
<input type='submit' name='submit'> 
</form>
  <?php endif; ?>

Touch screen interaction design challenge

Back in the olden days, we’re talking the 90s, there was shockwave. This was before Flash. Shockwave was the web component of Director.

At at the time there was a site Playcom if I recall, that had many Shock wave games some of which were pretty good. One of the games I thought was well conceived, though difficult to play, was called Tune Inn. The concept was a record store where you made records for customers. Customers wore shirts in a color  and the idea was to make records in colors that matched. You played two characters Pekka and Moniq. Pekka helped customers at the counter while Moniq made records upstairs. Heres a picture.

image

The original game used the keyboard to control and switch between characters. Here’s the challenge, how would you adapt this to a touch screen game?

Sidescrolling endless runners

If you haven’t played Canabalt, you should give it a try. This is one of the games to define the single button endless runner type games. the original was made in Flash. There’s also an IOS and Android version. I hear the Android version is better with different worlds and things.

Essentially the gist of the genre is that you are running forward avoiding obstacles. things get tougher as the game progresses. There’s lots of variation. I’m linking to an article here by the author of Canabalt talking about what went into making Canabalt and the decisions for different screen sizes, and game mechanics. Very informative if you wanted to make a similar game.

http://blog.semisecretsoftware.com/post/44317538718/tuning-canabalt

CSS Sprites

Using spritesheets with HTML is getting popular. The advantage is only having to load a single image file, rather than a separate image for each image element.

Here’s a link to an online tool that will make spritesheets and give you the coordinate data in CSS.

http://www.spritecow.com/

Corona SDK – Physics – chains

Playing with physics joints today. A common physics effect is to create chain. A chain in Corona SDK is a group of physics objects joined together with a Pivot joint. Create a chain by creating a series of display objects, use physics.addBody() to turn them into physics bodies, and last create a joint between each object connecting them in series.

A chain will often contain many links. This means that you will end up creating many physics bodies, and a joint a between pair. This is a lot of objects. Best to use a Loop here.

Create a joint between two physics objects with physics.newJoint(). The method takes 5 parameters:

physics.newJoint( "pivot", object1, object2, anchorX, anchorY )
  •  “pivot” – Sets the type of joint to pivot. 
  • object1 – first object in the joint.
  • object2 – second object in the joint.
  • anchorX – X position of of the joint between the two objects.
  • anchorY – Y position of the joint between the to objects.

The anchorX and anchorY set a common point where object1 and object2 are connected.

Here’s a simple function that makes a chain made of any number of rectangular links.

local function make_chain( x, y, w, h, c )
	local prev_link
	for i = 1, c do 
		local link = display.newRect( x, y+(i*(h+1)), w, h )
		if i == 1 then 
			physics.addBody( link, "static" )	
		else 
			physics.addBody( link, "dynamic" )	
			link.linearDamping = 1
			link.angularDamping = 11
		end 
		if i > 1 then 
			print( i )
			physics.newJoint( "pivot", prev_link, link, x, prev_link.y + (h*0.5) )
		end 
		prev_link = link
	end 
end 

This function takes 5 parameters

  • x – The x position of the first link.
  • y – The y position of the first link.
  • w – Width of each link.
  • h – Height of each link.
  • c – (Count) the number of links in the chain.

The first chain link is a static and so supports the chain.

For testing try the code below. Make a new default project in Corona and paste the following into main.lua. This example creates a chain, and a circle. Swipe to shoot the ball. The ball helps give you an idea how the chain reacts. 

local physics = require( "physics" )
physics.start()
physics.setDrawMode("hybrid")
-- physics.setContinuous( false )
physics.setVelocityIterations( 16 )

local function make_chain( x, y, w, h, c )
	local prev_link
	for i = 1, c do 
		local link = display.newRect( x, y+(i*(h+1)), w, h )
		if i == 1 then 
			physics.addBody( link, "static" )	
		else 
			physics.addBody( link, "dynamic" )	
			link.linearDamping = 1
			link.angularDamping = 11
		end 
		if i > 1 then 
			print( i )
			physics.newJoint( "pivot", prev_link, link, x, prev_link.y + (h*0.5) )
		end 
		prev_link = link
	end 
end 

make_chain( 160, 10, 20, 20, 10 )
-- make_chain( 160, 10, 20, 100, 3 )
-- make_chain( 160, 10, 10, 30, 5 )
-- make_chain( 160, 10, 5, 10, 20 )
-- make_chain( 80, 10, 5, 10, 20 )
-- make_chain( 240, 10, 5, 10, 20 )


local floor = display.newRect( 160, 480, 320, 10 )
physics.addBody( floor, "static" )
local left = display.newRect( 0, 240, 10, 480 )
physics.addBody( left, "static" )
local right = display.newRect( 320, 240, 10, 480 )
physics.addBody( right, "static" )
local top = display.newRect( 160, 0, 320, 10 )
physics.addBody( top, "static" )

local ball = display.newCircle( 160, 300, 30 )
physics.addBody( ball, "dynamic", {radius=30} )

local function shoot( event ) 
	if event.phase == "ended" then 
		local dx = event.x - event.xStart
		local dy = event.y - event.yStart
		ball:applyLinearImpulse( -dx * 0.01, -dy * 0.01, ball.x, ball.y )
	end 
end 

Runtime:addEventListener( "touch", shoot )

 

Ceramic Tile Engine and Tiled

Tiled is a desktop application that helps create tile maps from sprite sheets. Ceramic Tile Engine is a library for use with Corona that displays the data from Tiled. Two great tools that work great together. The demo provided with Ceramic has a really nice platform game example.

Tile maps are larger images created from smaller tiles. By using, and reusing, small tiles large environments can be created. Since a single image containing a few small tiles takes up much less memory than the image created with the tiles tile maps are more efficient.

Tiled is an application you can use to create tile maps. Tiled is generic and not tied to any other application or programming language. You’ll use it to build maps and export a text file describing your map. Usually this will be in the Json format.

Here are a few links:

Discussion on the Corona SDK forum

Ceramic documentation on GitHub

Ceramic Tiled Engine on Github

Video demo using Corona SDK and Tiled together

Corona SDK – Scrolling landscape

Here are a few ideas to get started creating a scrolling background. Create a background image that repeats, where the left edge would tile seamlessly when connected to the right edge. Copy a section the size of the visible area of the screen and add it to the right side of the image.

Here are a couple images for example. Look at the images carefully and you will see the the 480 pixels on the right side match the first 480 pixels on the left.

Landscape-1

 

Landscape-2 Landscape-3
These images link to the originals at full size. You can download them to use with the example code which follows.

 

Here’s a simple example that works with a single image.

 

local landscape = display.newImageRect( "landscape-1.png", 1440, 320 )

-- landscape:setReferencePoint( display.TopLeftReferencePoint )
landscape_1.anchorX = 0
landscape_1.anchorY = 0
landscape_1.x = 0
landscape_1.y = 0

local function reset_landscape( landscape )
	landscape.x = 0
	transition.to( landscape, {x=0-1440+480, time=30000, onComplete=reset_landscape} )
end

reset_landscape( landscape_1 )

Here’s an example that takes the code above and turns it into a function allowing you to create more animated landscapes without having to duplicate the code.


local function make_landscape( image, width, height, time )
	local landscape = display.newImageRect( image, width, height )

	-- landscape:setReferencePoint( display.TopLeftReferencePoint )
	landscape.anchorX = 0
	landscape.anchorY = 0	
	landscape.x = 0
	landscape.y = 320 - height
	landscape.time = time
	
	local function reset_landscape( landscape )
		landscape.x = 0
		transition.to( landscape, {x=0-landscape.width+480, time=landscape.time, onComplete=reset_landscape} )
	end
	
	reset_landscape( landscape )
	
	return landscape
end 

local landscape_group = display.newGroup()

local landscape_1 = make_landscape( "Landscape-1.png", 1440, 86, 10000 )
local landscape_2 = make_landscape( "Landscape-2.png", 1440, 168, 20000 )
local landscape_3 = make_landscape( "Landscape-3.png", 1440, 215, 30000 )

landscape_group:insert( landscape_3 )
landscape_group:insert( landscape_2 )
landscape_group:insert( landscape_1 )