Image Widgets

CreatiCode

Introduction

There are quite a few ways for you to add images to your project. You can either add an image widget directly onto the stage, or attach an image to another widget. The source of the image can be a costume or the URL of an image shared online.

Add Image from Costume

To add any costume image to the stage as a widget by itself, you can use the following block:

Costume Selection: The first input lists all the costumes in this sprite for you to choose from
X and Y: The position of the center point of the image widget. To place the image at the center of the stage, you can set both X and Y to 0.
Width and Height: The size of the image widget.
Aspect Ratio Type: The image from the costume will be scaled up or down to fit into the given width and height. But you can control its aspect ratio (ratio between width and height). If “keep” is selected, the image will keep its aspect ratio, so the image will look normal, but the image may not fully occupy the rectangle area. If “stretch” is selected, the image will occupy the entire rectangle area, but it may be stretched horizontally or vertically.
Name: The last input is the name of the image widget.

Example

This example shows the difference between the 2 aspect ratio types using 2 costume images. The image widget is a square shape that is 300 by 300, but the 2 costume images are not square, so we see a difference between ‘keep’ and ‘stretch’ options:

Update Image Widget Background

You can still update the background of the image if it has transparent areas:

Image from URL

If you have the URL of an image online, you can add it directly using the following block:

The first input has to be the URL of an image, such as https://play.creaticode.com/tcode-static-files/images/newlogo200.png.

All the other inputs are the same as the previous block.

Attaching a Costume Image to A Widget

Sometimes we may need to attach one or multiple images to another widget, such as a label or a button. You can use the “add image to widget” block:

Costume: The first input is the costume to use
Parent Widget: The second input is an existing widget, such as a label or button, that will be used as the parent of the image we are adding.
X and Y: These are the position of the image relative to the parent widget. For example, if X=0 and Y=0, the image will be added at the center of the parent widget.

Note that you can not set the width and height of the widget. It will be scaled to fit the height of the parent widget.

Example

In this example, we add a label first, then set its text style to make sure the text “Coddy” appears on the left. Then we attach the costume image to the right side of the label.

This is what we get:

Attach An Online Image Using Its URL

You can also attach an online image to a parent widget like this:

This is what you get: