Embedded Posts: Forcing Square Images

Combining my solutions for cropping images into squares and customising embedded posts:

I altered the styles to crop images into squares.

/**
 * Customises the style/colours of embedded posts (David Stockdale).
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed the  custom styles (David Stockdale).
 */
function embed_styles() {
    echo <<<CSS
<style>
	.wp-embed-author {
		margin-top: 0.5em;
	}
	.wp-embed-author a {
		color: #a6191a;
	}
	.wp-embed-author a:hover {
		color: #454545;
 	}
 	.wp-embed-featured-image {
 		width: 150px!important;
		height: 150px!important;
		
 	}
	.wp-embed-featured-image > a > img {
 		width: 150px!important;
		object-fit: cover;
		height: 150px!important;
 	}
</style>
CSS;
}

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

Thus creating a more uniform look:

Filed under: WordPressTagged with: , , ,

Improved Custom Gutenberg Image Styles “Circled” and “Squared”

I fiddled around with my crops a bit more and created these improved versions.

Square

Small


/**
 * Adds custom Gutenberg Image Block Style "Squared (Small)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '9.5em';
	$inline_css = '.is-style-square-small img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';}';
	register_block_style('core/image', [
		'name' => 'square-small',
		'label' => __('Squared (Small)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Medium

/**
 * Adds custom Gutenberg Image Block Style "Squared (Medium)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '15em';
	$inline_css = '.is-style-square-medium img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';}';
	register_block_style('core/image', [
		'name' => 'square-medium',
		'label' => __('Squared (Medium)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Large

/**
 * Adds custom Gutenberg Image Block Style "Squared (Large)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '35em';
	$inline_css = '.is-style-square-large img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';}';
	register_block_style('core/image', [
		'name' => 'square-large',
		'label' => __('Squared (Large)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Circle

Small

/**
 * Adds custom Gutenberg Image Block Style "Circle (Small)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '9.5em';
	$inline_css = '.is-style-circle-small img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle-small',
		'label' => __('Circled (Small)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Medium

/**
 * Adds custom Gutenberg Image Block Style "Circle (Medium)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '15em';
	$inline_css = '.is-style-circle-medium img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle-medium',
		'label' => __('Circled (Medium)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Large

/**
 * Adds custom Gutenberg Image Block Style "Circle (Large)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '35em';
	$inline_css = '.is-style-circle-large img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle-large',
		'label' => __('Circled (Large)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

This image has an empty alt attribute; its file name is test.jpg
This image has an empty alt attribute; its file name is test2.jpg
This image has an empty alt attribute; its file name is test3.jpg
Filed under: WordPressTagged with: ,

White Spaces Lingering When Quickly Scrolling

This is an unusual problem I have noticed with my site when I scroll up and down quickly on a long page.

I don’t know if this is just caused by loading a long page full of images, exerpts and code blocks (which are themselves scrollable).

Bit of a difficult thing to figure out when there are so many possible causes…

It only seems to happen when I scroll quickly/violently so I’d assume it was a loading issue.

But then the white spaces don’t linger on Edge so it might be a Chrome issue.

But then why doesn’t it happen on mobile?

I’ll probably post a question on a forum somewhere and put the solution here if I can find one.

Update:

Turns out the problem was rather simple, the html was white while the body was black.

Whenever the body failed to load quickly enough the white html background was revealed.

Filed under: WordPressTagged with:

Adding Custom Gutenberg Image Styles “Circled” and “Squared”

After quite a bit of searching I found the easiest way to add custom Gutenberg styles.

This single action contains both the registration of the style and the CSS of the style itself.

Square

The best way to bring uniformity to columns of images.

/**
 * Adds custom Gutenberg Image Block Style "Square" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-square img {
	object-fit: cover;
	width: 9.5em; 
	height: 9.5em;}';
	register_block_style('core/image', [
		'name' => 'square',
		'label' => __('Squared', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Circle

Takes the edge off.

/**
 * Adds custom Gutenberg Image Block Style "Circle" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-circle img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle',
		'label' => __('Circled', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

I feel like Circle could be improved…

Filed under: WordPressTagged with: , , ,

Circle And Square Crop

Figured out a couple ways to crop images in a few ways without having to handle it at upload.

Circle

To crop an image into a circle:

img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}

Before

After

Square

To crop an image into a square:

img {
	object-fit: cover;
	width: 9.5em; 
	height: 9.5em;
}

Before

After

Now I just need to figure out how to register these as custom Gutenberg Block Styles…

Filed under: WordPressTagged with: , ,

My Game: The Premise & Enemies

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

Filed under: AndroidTagged with:

Creating A Header Centred Between A Menu And A Widget

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.

Filed under: WordPressTagged with: , ,

Finding And Focusing On Player

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

Filed under: AndroidTagged with: , ,

Map Storage

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.
Filed under: AndroidTagged with: , ,