I then copied “embed-content.php” from “/wp-includes/theme-compat/” to my child themes folder and edited it to force all featured images to be considered squares.
<?php
/**
* Contains the post embed content template part
*
* When a post is embedded in an iframe, this file is used to create the content template part
* output if the active theme does not include an embed-content.php template.
*
* @package WordPress
* @subpackage Theme_Compat
* @since 4.5.0
*/
?>
<div <?php post_class( 'wp-embed' ); ?>>
<?php
$thumbnail_id = 0;
if ( has_post_thumbnail() ) {
$thumbnail_id = get_post_thumbnail_id();
}
if ( 'attachment' === get_post_type() && wp_attachment_is_image() ) {
$thumbnail_id = get_the_ID();
}
/**
* Filters the thumbnail image ID for use in the embed template.
*
* @since 4.9.0
*
* @param int $thumbnail_id Attachment ID.
*/
$thumbnail_id = apply_filters( 'embed_thumbnail_id', $thumbnail_id );
if ( $thumbnail_id ) {
$aspect_ratio = 1;
$measurements = array( 1, 1 );
$image_size = 'full'; // Fallback.
$meta = wp_get_attachment_metadata( $thumbnail_id );
if ( ! empty( $meta['sizes'] ) ) {
foreach ( $meta['sizes'] as $size => $data ) {
if ( $data['height'] > 0 && $data['width'] / $data['height'] > $aspect_ratio ) {
$aspect_ratio = $data['width'] / $data['height'];
$measurements = array( $data['width'], $data['height'] );
$image_size = $size;
}
}
}
/**
* Filters the thumbnail image size for use in the embed template.
*
* @since 4.4.0
* @since 4.5.0 Added `$thumbnail_id` parameter.
*
* @param string $image_size Thumbnail image size.
* @param int $thumbnail_id Attachment ID.
*/
$image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );
/**
*
* !!!!!! CHANGED TO PREVENT RECTANGLES !!!!!!
*
*/
$shape = 'square';
/**
* Filters the thumbnail shape for use in the embed template.
*
* Rectangular images are shown above the title while square images
* are shown next to the content.
*
* @since 4.4.0
* @since 4.5.0 Added `$thumbnail_id` parameter.
*
* @param string $shape Thumbnail image shape. Either 'rectangular' or 'square'.
* @param int $thumbnail_id Attachment ID.
*/
$shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );
}
if ( $thumbnail_id && 'rectangular' === $shape ) :
?>
<div class="wp-embed-featured-image rectangular">
<a href="<?php the_permalink(); ?>" target="_top">
<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
</a>
</div>
<?php endif; ?>
<p class="wp-embed-heading">
<a href="<?php the_permalink(); ?>" target="_top">
<?php the_title(); ?>
</a>
</p>
<?php if ( $thumbnail_id && 'square' === $shape ) : ?>
<div class="wp-embed-featured-image square">
<a href="<?php the_permalink(); ?>" target="_top">
<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
</a>
</div>
<?php endif; ?>
<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>
<?php
/**
* Prints additional content after the embed excerpt.
*
* @since 4.4.0
*/
do_action( 'embed_content' );
?>
<div class="wp-embed-footer">
<?php the_embed_site_title(); ?>
<div class="wp-embed-meta">
<?php
/**
* Prints additional meta content in the embed template.
*
* @since 4.4.0
*/
do_action( 'embed_content_meta' );
?>
</div>
</div>
</div>
<?php
The initial motivation for creating this game was my feeling that chemical weapons don’t really get used to their full potential in most video games (with gas grenades doing a small amount of damage over time and being rendered completely ineffective by a simple gas mask).
Of course creating a game focused entirely around chemical weapons required me to come up with a scenario in which guns and explosives where rendered completely ineffective.
The Premise
An asteroid has struck down in the small English town of Centrebrough and was quickly revealed to be filled with creatures from another world.
These aliens while no more intelligent that the average beast have evolved to be nigh immune to the effects of heat or kinetic force (thus explaining their ability to survive whatever event launched them into space in an asteroid and then reentry into Earth’s atmosphere).
This has left the military unable to fight the aliens using conventional weapons.
However it turns out that the asteroid contained an atmosphere similar to that of earth and that these creatures require such an atmosphere to survive.
This leads to the army contracting a team of mercenaries with a simple goal: reach the chemical plant at the centre of the town and use it to flood the streets with nitrogen gas and choke the aliens to death.
At the head of this team is you: a chemical weapons expert with a very simple motto.
“If It Breathes, It Dies”.
Enemies
From the beginning I had a basic idea of the types of enemies that I wanted to have in my game.
These are a few of the enemies I have managed to find art assets for so far.
Monster 1: Doggo
A dog-like creature with leathery skin, faster/longer movement than player, can tear hazmat suit due to claws/fangs.
Monster 2: Buggo
A flying insect with a poison stinger, does low damage on hit but does most of the players health in damage over time before the poison runs out.
Monster 3: Treeman
Some sort of plant based creature that doesn’t breath oxygen (I’m considering having it breath nitrogen thus leaving it immune the nitrogen grenades which will be the players default attack).
It constantly emits a cloud of parasitic spores (after battle is won player can harvest these spores for later use).
Shown above is the header I created within the Beans theme for the website of Tees Valley Arts.
The goal here was to mimic the old layout created for the Tees Valley Arts website using the Genesis theme using the Beans theme instead.
This required a widget area to the right of the site title for the use of the plugin “Simple social icons” (although I may later make an improved version that doesn’t require the plugin at all).
Functions
The code for setting everything to it’s proper place:
add_action( 'widgets_init', 'widget_areas' );
/**
* Add widget area.
*/
function widget_areas() {
beans_register_widget_area( array(
'name' => 'Right',
'id' => 'right',
'description' => 'Widgets in this area will be shown on the right side
of the site title (put simple social icons here).',
'beans_type' => 'grid'
) );
}
/**
* Display the header widget area at the end of the header.
*/
add_action( 'beans_site_branding_after_markup', 'header_widget_area' );
/**
* Header widget area layout/style.
*/
function header_widget_area() {
?>
<?php echo beans_widget_area( 'right' ); ?>
<?php
}
/**
* Moves Beans "Primary Menu" to the left side of the site title.
*/
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_prepend_markup' );
Style
The code for centring the site title between a stylised menu and a set of spaced out social icons:
/**
* Sets up the layout of the header
*/
//social media icons
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright {
margin-left:0px;
margin-right:0px;
padding-left:0px;
}
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li {
display: inline;
float:right;
width:25px;
height:25px;
padding-left:30px!important;
}
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li a svg {
width:25px;
height:25px;
}
//site title
body > div.tm-site > header > div > div.tm-site-branding {
display: inline;
}
body > div.tm-site > header.tm-header .uk-grid {
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
float:right;
}
body > div.tm-site > header.tm-header .uk-grid .uk-width-medium-1-1 {
width:232.188px;
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
}
//primary menu
body > div.tm-site > header.tm-header .tm-primary-menu {
margin-right:0px;
margin-left:0px;
float:left;
}
body > div.tm-site > header.tm-header .uk-container-center {
padding-left:0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
max-width:100%;
}
body > div.tm-site > header.tm-header {
margin-left:0px;
margin-right:0px;
text-align:center;
padding-left:8%;
padding-right:8%;
}
Widget
Then simply place the simple social icons plugin within the widget area.
Bear in mind that the plugins style settings will not function outside of a post/page but the style handles that.
Of course this solution doesn’t look good on mobile yet, so I’ll probably do another post on that when I’ve fixed it.
A compilation of embedded posts containing information on how I went about storing and displaying the maps used within the combat screen of my app “If It Breathes It Dies”.
When displaying a portion of the map upon the combat screen I had to ensure that the player was displayed on screen at all times.
Finding The Player
In order to find the player within the map I created the “checkTileForPlayer” method which checks if a single integer is one of the various numbers that represent the player.
/**
* A method that checks for any numbers that represent player-occupied versions of tiles
* (such as "blank_with_player" and "door_with_player").
* @param tile The number to be checked.
* @return A boolean indicating if the tile contains the player character.
*/
public Boolean checkTileForPlayer(int tile) {
boolean playerFound = false;
if(tile == 7 || tile == 104 || tile == 108 || tile == 112 || tile == 116 || tile == 126) {
playerFound = true;
}
return playerFound;
}
However this still left the issue of going through the unusual layout of my integer array maps.
I solved this issue with the creation of my most ramshackle and unwieldy method “findPlayer”.
This determines the “Column Number”, “Column Depth”, “Row”, “Item Number” and overall “Position” of the players current location.
/**
* Locates the player within the map and provides their precise coordinates.
* @return columnAndDepthAndRowAndItemAndPosition An array containing the Column Number,
* Column Depth, Row, Item Number and overall Position of the players current location.
*/
public int[] findPlayer() {
/**
* An array containing the column number and column depth to be returned.
*
* Now also includes which row contains the player along with the exact Item number
* of the player to pinpoint their exact position with precision.
*/
int[] columnAndDepthAndRowAndItemAndPosition = {0, 0, 0, 0, 0};
//int a = 0;
//^ REPLACED WITH columnAndDepthAndRowAndItemAndPosition[4] !!!!
int currentRow = 0;
int columnDepth = 0;
while (columnAndDepthAndRowAndItemAndPosition[4] < map.length) {
int currentColumn = 0;
/**
* Number Of Columns Loop
* loops whatever the single column loop would have done several times depending on how many columns there are
*/
for (int column = 0; column < numberOfColumns; column++) {
/**
* Single Column Loop
* loop: goes through all 11 lines/rows of a single column in the map
*
* Line: the line being looked at in the column (11 each column)
*/
for (int line = 0; line < mapHeight; line++) {
currentColumn++;
/**
* Single Line Loop
* loop: goes through a line in the map
*
* itemNum: the item being looked at in the line (17 each line).
*/
for (int itemNum = 0; itemNum < mapWidth; itemNum++) {
/**
* If reached the end of the current row (across all columns) increase currentRow by 1.
*
* if(a % 51 == 0)
* maybe replace 51 with ((mapWidth * numberOfColumns) - 1)?
* maybe replace 51 with (mapWidth * numberOfColumns)?
*/
if (columnAndDepthAndRowAndItemAndPosition[4] % (mapWidth * numberOfColumns) == 0) {
/**
* if this is the last row in a column then depth increases by 1.
*/
if (currentRow % mapHeight == 0) {
columnDepth++;
}
currentRow++;
}
/**
* PLAYER FOUND!
*
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! IMPORTANT !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
* current version checks for player by seeing if a is "7" as that is the number that represents "blank_with_player"
* Future versions should have a "checkTileForPlayer(int tile)" method that checks for any numbers that represent player-occupied versions of tiles (such as "blank_with_player" and "door_with_player")
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! IMPORTANT !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
if (checkTileForPlayer(map[columnAndDepthAndRowAndItemAndPosition[4]])) {
columnAndDepthAndRowAndItemAndPosition[0] = currentColumn;
columnAndDepthAndRowAndItemAndPosition[1] = columnDepth;
/**
* USE "CURRENTROW" AND "ITEMNUM" TO FIND PLAYER BEFORE AND AFTER MOVING THEN
*
* MAKE FINDPLAYER() RETURN "CURRENTROW" AND "ITEMNUM" ASWELL!
*
*
*/
columnAndDepthAndRowAndItemAndPosition[2] = currentRow;
columnAndDepthAndRowAndItemAndPosition[3] = itemNum;
//System.out.println("Row: " + (currentRow));
//System.out.println("Item: " + (itemNum));
System.out.println("LOCATION: " + (columnAndDepthAndRowAndItemAndPosition[4]));
/**
* If I put return here does it skip the rest of the loop?
*/
return columnAndDepthAndRowAndItemAndPosition;
}
columnAndDepthAndRowAndItemAndPosition[4]++;
}
if (currentColumn == numberOfColumns) {
currentColumn = 0;
}
}
}
}
return columnAndDepthAndRowAndItemAndPosition;
}
Although this method likely returns more information than is needed it performs it’s intended purpose.
A section of the map integer array highlighting the number representing the player standing on stone.
Focusing On The Player
The “setupMap” method does the lions share of the work in actually going through the map and finding numbers representing images to assign to tiles on the combat screen.
As the map is split into nine sections, each big enough to fill the combat screen, the method only displays whichever section currently contains the player.
/**
* Peruses a section of the map for numbers representing images to assign to tiles.
* @param targetColumn The column number of the target section of the map.
* @param targetColumnDepth The column depth (as im using the word "row" for something else) of
* the target section of the map.
*/
public void setupMap(int targetColumn, int targetColumnDepth) {
/**
* The map item currently being looked at.
*/
int a = 0;
/**
* The row currently being looked at.
*/
int currentRow = 0;
/**
* The column depth currently being looked at.
*/
int columnDepth = 0;
/**
* Tile currently being set/worked-on.
*/
int currentTile = 0;
System.out.println("LENGTH: " + map.length);
while (a < map.length) {
int currentColumn = 0;
/**
* Number Of Columns Loop
* loops whatever the single column loop would have done several times depending on how many columns there are
*/
for (int column = 0; column < numberOfColumns; column++) {
/**
* Single Column Loop
* loop: goes through all 11 lines/rows of a single column in the map
*
* Line: the line being looked at in the column (11 each column)
*/
for (int line = 0; line < mapHeight; line++) {
currentColumn++;
/**
* The entire row in the form of a string (USED FOR TESTING).
*/
//String row = "";
/**
* Single Line Loop
* loop: goes through a line in the map
*
* itemNum: the item being looked at in the line (17 each line).
*/
for (int itemNum = 0; itemNum < mapWidth; itemNum++) {
// if (row == "") {
// row = row + map[a];
// } else {
// row = row + ", " + map[a];
// }
/**
* If reached the end of the current row (across all columns) increase currentRow by 1.
*
* if(a % 51 == 0)
* maybe replace 51 with ((mapWidth * numberOfColumns) - 1)?
* maybe replace 51 with (mapWidth * numberOfColumns)?
*/
if (a % (mapWidth * numberOfColumns) == 0) {
/**
* if this is the last row in a column then depth increases by 1.
*/
if (currentRow % mapHeight == 0) {
columnDepth++;
}
currentRow++;
}
/**
* what is needed to set parameters of where on the map to load?
* targetColumn:
* targetColumnDepth:
*/
if (currentColumn == targetColumn && columnDepth == targetColumnDepth) {
String i = ("i" + currentTile);
//System.out.println(i + " ----------------- Tile: " + currentTile + " map: " + a);
/**
* set tile
*/
setTile(a, tiles[currentTile]);
//tiles[currentTile].setImageResource(R.drawable.blank);
currentTile++;
}
//System.out.println("Column: " + (currentColumn));
//System.out.println("Column Depth: " + (columnDepth));
/**
* USE "CURRENTROW" AND "ITEMNUM" TO FIND PLAYER BEFORE AND AFTER MOVING THEN
*
* MAKE FINDPLAYER() RETURN "CURRENTROW" AND "ITEMNUM" ASWELL!
*
*
*/
//System.out.println("Row: " + (currentRow));
//System.out.println("Item: " + (itemNum));
a++;
}
//System.out.println("Line: " + (line + 1));
//System.out.println(row);
if (currentColumn == numberOfColumns) {
currentColumn = 0;
}
}
}
}
}
Assigning of appropriate images to tiles on the combat screen is done using the “setTile” method.
/**
* Sets the image displayed by the ImageView to the appropriate tile for the number provided.
* @param tileNum The number taken from the map which represents a specific type of tile.
* @param tile The ImageView used to display a tile upon the combat screen.
*/
public void setTile(int tileNum, ImageView tile) {
switch (map[tileNum]) {
case 101: //Stone Wall Up
tile.setImageResource(R.drawable.stone_wall_up);
break;
case 102: //Stone Wall Up Door
tile.setImageResource(R.drawable.stone_wall_up_door);
break;
case 103: //Stone Wall Up Door Open
tile.setImageResource(R.drawable.stone_wall_up_door_open);
break;
case 104: //Stone Wall Up Door Open With Player
tile.setImageResource(R.drawable.stone_wall_up_door_open_with_player);
break;
case 105: //Stone Wall Left
tile.setImageResource(R.drawable.stone_wall_left);
break;
case 106: //Stone Wall Left Door
tile.setImageResource(R.drawable.stone_wall_left_door);
break;
case 107: //Stone Wall Left Door Open
tile.setImageResource(R.drawable.stone_wall_left_door_open);
break;
case 108: //Stone Wall Left Door Open With Player
tile.setImageResource(R.drawable.stone_wall_left_door_open_with_player);
break;
case 109: //Stone Wall Right
tile.setImageResource(R.drawable.stone_wall_right);
break;
case 110: //Stone Wall Right Door
tile.setImageResource(R.drawable.stone_wall_right_door);
break;
case 111: //Stone Wall Right Door Open
tile.setImageResource(R.drawable.stone_wall_right_door_open);
break;
case 112: //Stone Wall Right Door Open With Player
tile.setImageResource(R.drawable.stone_wall_right_door_open_with_player);
break;
case 113: //Stone Wall Down
tile.setImageResource(R.drawable.stone_wall_down);
break;
case 114: //Stone Wall Down Door
tile.setImageResource(R.drawable.stone_wall_down_door);
break;
case 115: //Stone Wall Down Door Open
tile.setImageResource(R.drawable.stone_wall_down_door_open);
break;
case 116: //Stone Wall Down Door Open With Player
tile.setImageResource(R.drawable.stone_wall_down_door_open_with_player);
break;
case 117: //Stone Wall Up Left Corner
tile.setImageResource(R.drawable.stone_wall_up_left_corner);
break;
case 118: //Stone Wall Up Right Corner
tile.setImageResource(R.drawable.stone_wall_up_right_corner);
break;
case 119: //Stone Wall Down Left Corner
tile.setImageResource(R.drawable.stone_wall_down_left_corner);
break;
case 120: //Stone Wall Down Right Corner
tile.setImageResource(R.drawable.stone_wall_down_right_corner);
break;
case 121: //Stone Wall Up Left Square
tile.setImageResource(R.drawable.stone_wall_up_left_square);
break;
case 122: //Stone Wall Up Right Square
tile.setImageResource(R.drawable.stone_wall_up_right_square);
break;
case 123: //Stone Wall Down Left Square
tile.setImageResource(R.drawable.stone_wall_down_left_square);
break;
case 124: //Stone Wall Down Right Square
tile.setImageResource(R.drawable.stone_wall_down_right_square);
break;
case 125: //Stone
tile.setImageResource(R.drawable.stone);
break;
case 126: //Stone With Player
tile.setImageResource(R.drawable.stone_with_player);
break;
case 127: //Stone With Poison Gas
tile.setImageResource(R.drawable.stone_with_poison_gas);
break;
case 128: //Stone Wall Up Left Corner
tile.setImageResource(R.drawable.stone_wall_up_left_corner_with_poison_gas);
break;
case 129: //Stone Wall Up Right Corner
tile.setImageResource(R.drawable.stone_wall_up_right_corner_with_poison_gas);
break;
case 130: //Stone Wall Down Left Corner
tile.setImageResource(R.drawable.stone_wall_down_left_corner_with_poison_gas);
break;
case 131: //Stone Wall Down Right Corner
tile.setImageResource(R.drawable.stone_wall_down_right_corner_with_poison_gas);
break;
case 132: //Stone Wall Up Left Square
tile.setImageResource(R.drawable.stone_wall_up_left_square_with_poison_gas);
break;
case 133: //Stone Wall Up Right Square
tile.setImageResource(R.drawable.stone_wall_up_right_square_with_poison_gas);
break;
case 134: //Stone Wall Down Left Square
tile.setImageResource(R.drawable.stone_wall_down_left_square_with_poison_gas);
break;
case 135: //Stone Wall Down Right Square
tile.setImageResource(R.drawable.stone_wall_down_right_square_with_poison_gas);
break;
case 136: //Stone Wall Down
tile.setImageResource(R.drawable.stone_wall_up_with_poison_gas);
break;
case 137: //Stone Wall Down
tile.setImageResource(R.drawable.stone_wall_left_with_poison_gas);
break;
case 138: //Stone Wall Down
tile.setImageResource(R.drawable.stone_wall_right_with_poison_gas);
break;
case 139: //Stone Wall Down
tile.setImageResource(R.drawable.stone_wall_down_with_poison_gas);
break;
case 140: //Stone Wall Up Door
tile.setImageResource(R.drawable.stone_wall_up_door_with_poison_gas);
break;
case 141: //Stone Wall Up Door Open
tile.setImageResource(R.drawable.stone_wall_up_door_open_with_poison_gas);
break;
case 142: //Stone Wall Left Door
tile.setImageResource(R.drawable.stone_wall_left_door_with_poison_gas);
break;
case 143: //Stone Wall Left Door Open
tile.setImageResource(R.drawable.stone_wall_left_door_open_with_poison_gas);
break;
case 144: //Stone Wall Right Door
tile.setImageResource(R.drawable.stone_wall_right_door_with_poison_gas);
break;
case 145: //Stone Wall Right Door Open
tile.setImageResource(R.drawable.stone_wall_right_door_open_with_poison_gas);
break;
case 146: //Stone Wall Down Door
tile.setImageResource(R.drawable.stone_wall_down_door_with_poison_gas);
break;
case 147: //Stone Wall Down Door Open
tile.setImageResource(R.drawable.stone_wall_down_door_open_with_poison_gas);
break;
case 148: //Stone With Player
tile.setImageResource(R.drawable.stone_with_player_with_poison_gas);
break;
case 149: //Stone Wall Up Door Open With Player
tile.setImageResource(R.drawable.stone_wall_up_door_open_with_player_with_poison_gas);
break;
case 150: //Stone Wall Left Door Open With Player
tile.setImageResource(R.drawable.stone_wall_left_door_open_with_player_with_poison_gas);
break;
case 151: //Stone Wall Right Door Open With Player
tile.setImageResource(R.drawable.stone_wall_right_door_open_with_player_with_poison_gas);
break;
case 152: //Stone Wall Down Door Open With Player
tile.setImageResource(R.drawable.stone_wall_down_door_open_with_player_with_poison_gas);
break;
case 153: //Stone With Acid
tile.setImageResource(R.drawable.stone_with_acid);
break;
}
}
The first challenge I encountered when creating a tile-based mobile game was deciding how I would store the various maps upon which various combat scenarios would take place.
What I eventually settled on was an array of integers with each number representing a different type of tile, these arrays were arranged in such a way that the integers were displayed within the xml file in the same layout as the actual map.
This may not have been the best choice for storing the map info but I implemented it anyway as I enjoyed the ease with which I could edit the maps.
A (very small) look at how the map integer arrays are laid out within my code.
3 x 3
As you may have noticed above the integer array has been laid out into three columns of three rows, each of these sections represent enough tiles to fill the combat screen of my app.
When I first tested the combat screen of my app I only created a map big enough to fill the screen before deciding that each map should contain nine such areas in order to give the player the illusion of a bigger world.
The middle section of the map integer array shown above.
I accomplished this by simply making the integer array nine times longer, although looking back I realise it may or may not have been simpler to just have nine separate arrays.
These new larger maps however brought with them a new problem: if the player can move around in an area larger than the screen, how should I go about ensuring that the player is always on the screen?
The middle section of the map integer array shown above when displayed.
