Tag Archives: images

Adding assets to your 2D game in Unity

This video explains how to import assets into a 2D game project in Unity. Assets in your game will include items such as background images, character sprites, objects in your game scene, materials, and scripts that will control the game.

We will get started by adding a sky background, the ground, and a player object (ball). To add assets to your game, you simply drag and drop files directly into the Assets panel. Files you might like to add include images for backgrounds, spritesheets for characters, animations, sounds, and materials.

addassets

To see how this is done, watch the video below.

Next tutorial: Adding physics and colliders to your 2D game

Adding thumbnail images to list rows in the iOS List App with Xamarin

This tutorial will show you how to add a thumbnail image to each row of the Cities list in the iOS List app we made in the previous two tutorials. This is what the app will look like…

image1

Step 1

To get started, open the Main.storyboard file in the iOS List App solution. Resize the labels on the table row on the main screen and move them to the right side of the table row. Then drag an ImageView element from the toolbox on to the left side of the table row. Change the ImageView element’s name to cityImageView.

image2

Step 2 

Make sure you have added your images to your project (this was explained in the previous tutorial).

image3

Also make sure you have added public string ImagePath; to your code as seen on line 76 of the CitiesViewController.cs file below (this was also explained in the previous tutorial).

Click image to see larger version.
Click image to see larger version.

For each city in your list, you should also have specified the ImagePath value (location of the image and its filename) in the CitiesViewController.cs file.

Click image to see larger version.
Click image to see larger version.

Step 3

In the CityTableViewCell.cs file, add the following highlighted line to set the image displayed for each row of the City class. This will get the images to display on each row. Save all of your files.

image6

Step 4

Now just go and test your app. This is what the thumbnail images should look like:

preview

Making a Cookie Clicker game for iOS

In this tutorial we will make a Cookie Clicker game for iOS mobile devices using Xamarin.We made the same app for Android in a previous tutorial and now we are going to make it for iOS devices. You will also learn how to use images for buttons instead of plain text.

This is what the basic working app will look like but you can improve the look of it by change the text and background colours and by adding more options.

iOS Cookie Clicker app
iOS Cookie Clicker app

Watch the video below or scroll down for the full instructions and sample code.

Video

Step 1

Start a new Solution (File > New > Solution). Select App under iOS and then select Single View App. Click on Next.

ioscc1

Step 2

Give your app a name, select the minimum iOS version you want to support and click Next.

ioscc2

Step 3

Give your project and solution a name (you can keep it as the default) and then choose the location where you will store your project (eg. the Projects folder). Then click on Create.

ioscc3

Step 4

Open the Main.storyboard file (in the Resources directory). Change the view from Generic to the iPhone model you are targeting (eg. iPhone 6S).

ioscc4

Step 5

Drag a Button element on to the screen from the Toolbox.

ioscc5

Step 6

You will need a cookie image for your app. Once you have an image on your computer, select the Resources folder. Click the cog icon, then Add > Add Files from Folder.

ioscc6

Step 7

Find the folder that contains your cookie image. Then click on Open.

ioscc7

Step 8

Click the checkbox next to the image you want to use and then click OK.

ioscc8

Step 9

Choose Copy the file to the directory and then click OK.

ioscc9a

You should now see the image in the Resources directory.

ioscc9b

Step 10

Now select the Button you added earlier and from the Widget tab on the Properties panel, scroll down until you see the Background property. Click the dropdown box and choose the image you want to use (eg. cookie.png). Alternatively, type in the filename in the text box.

ioscc10

Now you have a cookie image as the background for your button. However, the button is very small so it will need resizing.

ioscc10b

Step 11

Click and drag the corners of the button to enlarge it so that the background image of the cookie is nice and clear.

ioscc11

Step 12

Now go and remove the Default title value under Title on the Properties panel so that the button text is no longer visible on the button.

ioscc12

Step 13

Add a Label element to the screen under your cookie button and change its Text value to say ‘0 clicks’.

ioscc13

Step 14

Change the Name of the Button element to cookieButton.

ioscc14

Step 15

Change the Name of the Label element to clicksLabel.

ioscc15

Step 16

Now all that remains is adding the code that will count and display the number of clicks. Open the ViewController.cs file to begin coding.

ioscc16

Step 17

Firstly, create a variable called clicks that will contain an integer value. Its initial value should be 0 before any clicks have been recorded. Inside the public partial class ViewController : UIViewController section, add the following line of code:

int clicks = 0;

ioscc17

Step 18

Now you need to add a button touch event so that every time the cookie button is touched, the clicks variable’s value will increase by 1. To do this, go to the ViewDidLoad method and make some new space under the base.ViewDidLoad() line. Start typing cookieButton.TouchUpInside+= and then press the Spacebar. As you do this, you will see a list of options. Double click the CookieButton_TouchUpInside option to create a new method.

ioscc18

After creating the new CookieButton_TouchUpInside method, you can now add code inside the method that will run when the cookie button is touched by the user. This code should increase the clicks variable by 1 and display the number of clicks every time the button is touched.

ioscc18b

Step 19

Add the following code inside the CookieButton_TouchUpInside method:

clicks++;
clicksLabel.Text = clicks.ToString() + “ clicks!”;

This code will increase the clicks variable by 1 every time the button is tapped as well as displaying the value of the variable and concatenating (joining) the value to the text ‘ clicks!’ – for example 20 clicks! Note that the clicks variable’s value has to be converted to a string before it can be displayed on the button.

ioscc19

Now you can test the app!

ioscc19b

When you test the app, click or touch the cookie button and you should see the number of clicks displayed increased, as shown below.

iOS Cookie Clicker app
iOS Cookie Clicker app

Try extending the app by adding some buttons with the options to ‘buy’ items or unlock items after a certain number of clicks. You could also use a timer to increase the number of clicks automatically over a period of time (eg. 5 clicks every second). You might also like to change the colour of the text and the background of the app.

Sample C# code

Here is the sample C# code for the ViewController.cs file (please note that the namespace should match the project/solution/app name of your app. It is called CookieClickerIOS in this example.

using System;

using UIKit;

namespace CookieClickerIOS
{
  public partial class ViewController : UIViewController
  {
    int clicks = 0;

    public ViewController (IntPtr handle) : base (handle)
    {
    }

    public override void ViewDidLoad ()
    {
      base.ViewDidLoad ();
      // Perform any additional setup after loading the view, typically from a nib.

      cookieButton.TouchUpInside+= CookieButton_TouchUpInside;

    }

    void CookieButton_TouchUpInside (object sender, EventArgs e)
    {
      clicks++;
      clicksLabel.Text = clicks.ToString () + " clicks!";
    }

    public override void DidReceiveMemoryWarning ()
    {
      base.DidReceiveMemoryWarning ();
      // Release any cached data, images, etc that aren't in use.
    }
  }
}

Making a Cookie Clicker game for Android

For our second Android app project, we will create the most pointless but addictive game in the world…a cookie clicker! A basic version of it will look like the image shown below, but you can extend this game as much as you like. You will also learn how to add image buttons to your app screens.

cc1

Watch the video below or scroll down to read the step-by-step instructions and view the sample code.

Video

Step 1

You will need to create a new Android App solution in Xamarin called CookieClicker. Click on New Solution (or File > New Solution) to get started.

cc2

Step 2

Choose Android App as the type of new solution and then click Next.

cc3

Step 3

Set the App Name to CookieClicker (one word – no spaced). Choose Modern Development as the Targeted Platform using the default theme and click on Next.

cc4

Step 4

Keep the project and solution names as CookieClicker, select a project location to store your files in and click on Create.

cc5

Step 5

Open the MainActivity.cs file (if it does not automatically open) and delete the lines of code highlighted below. These lines of code won’t be needed for this project.

cc6
Click to see larger version of this image.

Step 6

Now open the Main.axml file located in the Resources > layout folder.

cc7

Step 7

Click on the button that says “Hello World, Click Me!”. We won’t need this button so it can be deleted. Either click on it and press the Delete key on your keyboard, or right-click the button and select Delete.

cc8

Step 8

From the Toolbox (if you don’t see it, you can search for the Toolbox from the search bar), scroll down under Images & Media and drag an ImageButton element on to the phone screen.

cc9

Step 9

Now you will need to download a cookie image to your computer (preferably a PNG image file with a transparent background). A free public-domain image has been provided below. Click on the image to open the full-size version and then save the image to a folder on your computer and name it cookie.png.

Click to open the full-size image. Image from: https://pixabay.com/en/chocolate-chip-cookies-dessert-304801/ (CC0 Public Domain - free for commercial use, no attribution required)
Click to open the full-size image. Image from: https://pixabay.com/en/chocolate-chip-cookies-dessert-304801/ (CC0 Public Domain – free for commercial use, no attribution required)

Step 10

Select the ‘drawable’ folder inside the Resources folder and click on the small cog icon. Then select Add > Add Files from Folder.

cc10

Step 11

Select the folder that contains the cookie image file and click on Open.

cc11

Step 12

Select the cookie.png file (or whatever yours is called) and make sure the checkbox is checked. Then click on OK.

cc12

Step 13

Make sure you select Copy the file to the directory and then click on OK.

cc13

Step 14

Now you should see cookie.png in the drawable folder.

cc14

Step 15

Click on the ImageButton element on the phone screen and change the Src property to @drawable/cookie (you do not need to include the .png file extension).

cc15

Step 16

Now we need to make sure the image fits properly on the screen. Click on the drop-down arrow next to the Scale Type property and change it to fitCenter.

cc16a

You can then also click on the ImageButton and drag the little circle up to change the height of the image. You can also change the width of the image this way. Alternatively, go to the Layout tab on the Properties panel and change the width and height values there eg. 435dp for the height. Note: sizes of elements are measured using the ‘dp’ unit on Android.

cc16b

cc16c

If you go to the Source tab, your code for the Main.axml file might look like the code shown below. However, your code could be a little different so don’t change the code here unless you are sure you know what you are doing.

cc16d

Step 17

In the Designer view, drag a Text (Large) element on to the phone screen under the ImageButton. This will be used to display the number of clicks.cc17

Step 18

From the Widget tab on the Properties panel, change the Text value from Large Text to 0 clicks. At the same time, change its Id from @+id/textView1 to @+id/cookieTextView . You can also change the Gravity value to center so the text is centered.

cc18

Step 19

Click on the ImageButton element (the cookie) and change its Id from @+id/imageButton1 to @+id/cookieImageButton – now you need to save the Main.axml file.

cc19

Step 20

Now we can add the code! Open the MainActivity.cs file and create an integer variables called clicks that is given an initial integer value of 0. This variable will be created inside the MainActivity class, as highlighted below.

cc20

Step 21

We also need to define the ImageButton element and the TextView element in the code. This is highlighted in the lines below. Make sure to use the correct names for each element.

cc21

Step 22

Inside the OnCreate method (under the SetContentView (Resource.Layout.Main); line), we need to now setup the ImageButton and TextView element.

cc22

Step 23

The next thing you need to do is create a click event for the cookie ImageButton by adding the line cookieImageButton.Click+= CookieImageButton_Click; – this will create a new method called CookieImageButton_Click which will contain the code that will increase the number of clicks and display the number of clicks each time the ImageButton is tapped.

cc23

Step 24 

Inside the CookieImageButton_Click method, add the following two highlighted lines of code. The clicks++; line will increase the clicks variable by 1 each time the button is tapped, and the next line of code is responsible for converting the clicks variable value to a string and displaying the clicks variable’s value on the screen as well as the text “clicks!” at the end eg. 25 clicks!

cc24a

Now save your work. All of the coding is done! Now you could extend this app by adding extra buttons to purchase items when a certain number of cookies are clicked (using if statements) or increase the number of cookies by a different amount. You could add extra text labels or buttons too. However, let’s test that this app works properly first. Click on the Build button after selecting a virtual device to run the app on (if you don’t know how to do this, refer to the previous tutorial – Creating your first Android app with Xamarin).

cc25a

cc25b

Here is the source code for the MainActivity.cs file:

using Android.App;
using Android.Widget;
using Android.OS;

namespace CookieClicker
{
  [Activity (Label = "CookieClicker", MainLauncher = true, Icon = "@midmap-hdpi/icon")]
  public class MainActivity : Activity
  {
    int clicks = 0;

    ImageButton cookieImageButton;
    TextView cookieTextView;

    protected override void OnCreate (Bundle savedInstanceState)
    {
      base.OnCreate (savedInstanceState);

      // Set our view from the "main" layout resource
      SetContentView (Resource.Layout.Main);

      cookieImageButton = FindViewById<ImageButton> (CookieClicker.Resource.Id.cookieImageButton);
      cookieTextView = FindViewById<TextView> (CookieClicker.Resource.Id.cookieTextView);

      cookieImageButton.Click+= CookieImageButton_Click;

    }

    void CookieImageButton_Click (object sender, System.EventArgs e)
    {
      clicks++;
      cookieTextView.Text = clicks.ToString () + " clicks!";
    }
  }
}

 

Float and clear property

In this tutorial we will use the float and clear CSS properties to arrange images and text on a web page.:

    • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
    • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

In this tutorial, we will float an image and clear a paragraph. We can float an image to the left or right and clear other content around it.

Here is an example of an image floating to the left without clearing the text.

Screen Shot 2015-05-15 at 9.03.35 am

Here is an example of an image floating to the right without clearing the text.

Screen Shot 2015-05-15 at 9.10.24 am

And here is an example of the image floating to the left and the clear property for the paragraph of text set to clear left.

Screen Shot 2015-05-15 at 9.12.44 am

Watch the video below and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Float and clear</title>
 <link rel="stylesheet" href="resources/stylesheet15.css"/>
</head>
 
<body>
 <img src="resources/canada.jpg" class="pic"/>
 <p class="paragraph">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
 
 <p class="paragraph">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Here is the sample CSS code:

.pic{
 float:left; /* Float can be left or right */
 padding:5px;
}
.paragraph{
 clear:none; /* clear can be none, left, right, or both */
}

Background images and colours

This tutorial explains how to add a background image to divs and the body section of your web page. It also explains how to have fixed background images (that don’t scroll with the content of your web page) and change the placement of background images. You will also see how to add background colours behind background images.

In the example image below, there is a div inside the body of the page. The body has a background image (a greyish gradient) while the div has a light green background.

Screen Shot 2017-04-14 at 4.30.34 pm

Watch the video below and then scroll down to see the sample code.

Below is the sample code for the HTML file. If you add more content to your page so that the page can scroll down, you will notice that the background image doesn’t move because it is set to a fixed position in the CSS code. Note that the HTML code refers to CSS in a separate stylesheet file (called stylesheet4.css and stored in a resources folder).

<!DOCTYPE html>
<html>
<head>
 <title>Background images</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet4.css" type="text/css"/>
</head>
 
<body>
 
 <div>
 <h1>This is a heading</h1>
 <p>This is a paragraph</p>
 </div>
 
</body>
 
</html>

Here is the sample code for the CSS file (it’s called stylesheet4.css and stored in a resources folder):

body{
 background-image:url("nepal.png");
 background-color:blue;
 background-repeat:no-repeat;
 background-attachment:fixed;
}
 
div{
 width:450px;
 height:300px;
 background-image:url("canada.jpg");
 background-repeat:no-repeat;
 background-position:center top;
}

Adding images to a webpage

This tutorial explains how to add images to your web pages using the HTML <img> tag. You can specify a number of attributes for an image including the following:

  • src – specifies the location or path of the image
  • width – specifies the width of the image
  • height – specifies the height of the image
  • alt – specifies alternative text to be displayed in case the image cannot load.

The structure of an <img> tag may be set out like the one below:

Here are a few important things to note:

  • You should aways use alt text in case the image cannot be loaded in the user’s browser

    This is what alt text looks like when an image can’t load:
    alttextAlt text often also shows up after a few seconds when the user hovers their mouse over an image.

  • The path and filename of the image specified in the src tag in your code must be exactly the same as the actual file
  • You should specify the width and height of the image so the correct space is set aside even if the image can’t be loaded
  • You can change the width/height of an image to make it smaller. However, it is a good idea to make the image the correct size in the first place to reduce the time it takes to download the image

Watch the video below to see how to use the <img> tag in your own web page and then scroll down to see the sample code.

This sample code shows how to add an image to a webpage. Copy this code into a new HTML file. Modify the width and height of the image in the code to suit your own image file and experiment with different size images.

<!DOCTYPE html>
<html>
<head>
 <title>My webpage</title>
 <meta charset="utf-8"/>
</head>
<body>
<img src="batman.png" alt="Batman" width="400" height="400"/>

<!-- Make sure you include the full file path of an image if it is located in a different folder eg. folder2/batman.png 
-->
</body>
</html>

How to make an image a link

If you want to make an image a link so that when the user clicks on image they are taken to another page, you can just place the image tag inside the link tag (instead of text for the link). As an example, the following code would take the user to ‘other_page.html’ when they click on the image which has the file name ‘your_image.png‘:

<a href="other_page.html"><img src="your_image.png"/></a>

After watching the video, answer the following questions for discussion before the next lesson:

  1. Which unit of measurement is used to specify the width/height of an image in the code? How could the use of this unit affect the way images are displayed on screens of different sizes?
  2. Are there any other units of measurement that can be used?
  3. What could cause an image to fail to load in a user’s browser?
  4. Why is it important to use images with smaller file sizes?
  5. What issues need to be considered before including images on a web page?
  6. Evaluate the effectiveness of using images to convey large amounts of information on a web page.

Now create your own web page using several of your own images combined with text. You can use the sample code above to get started.

Once you are ready to move on, click here to find out how to add audio to your web pages.

How to remove blemishes from a photo with Adobe Photoshop CC

Do you have any photos with dust or dirt marks or maybe some old scanned photos with marks on them you’d like to clean up? This video explains how to remove marks and blemishes, and blend colours in using the Spot Healing brush and the Clone Stamp tool. You can watch the video below or click here to view it on YouTube.