Image Component

src/graphics/image.js#L29-L43

Draw an image with or without repeating (tiling).

If the entity's width and height are smaller than the width and height of the image source, the image will appear cropped. If the entity's dimensions are larger than the dimensions of the image source, the exact appearance of the remaining space will depend on what renderer (WebGL, DOM, or Canvas) is used. However, if tiling is enabled, the remaining space will be filled by a repeating pattern of the image.

Note: Image scaling is not supported by this component. Use a spritesheet, defined by Crafty.sprite, consisting of a single Sprite instead.

Methods

Back to top

.image()

src/graphics/image.js#L58-L92

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");