Image Component

Draw an image with or without repeating (tiling).

Methods

Back to top

.image()

Events

Invalidate
when the image is loaded
public this .image(String url[, String repeat])
url

URL of the image

repeat

If the image should be repeated to fill the entity. This follows CSS syntax: ("no-repeat", "repeat", "repeat-x", "repeat-y"), but defaults to no-repeat.

Draw the specified image.

Note: The default value of repeat is no-repeat, which is different than the standard CSS default

If the width and height are 0 and repeat is set to no-repeat the width and height will automatically assume that of the image. This is an easy way to create an image without needing sprites.

If set to no-repeat and given dimensions larger than that of the image, the exact appearance will depend on what renderer (WebGL, DOM, or Canvas) is used.

Example

Will default to no-repeat. Entity width and height will be set to the images width and height

var ent = Crafty.e("2D, DOM, Image").image("myimage.png");

Create a repeating background.

var bg = Crafty.e("2D, DOM, Image")
             .attr({w: Crafty.viewport.width, h: Crafty.viewport.height})
             .image("bg.png", "repeat");