new Picture(image) → {Picture}
The MC Picture Object provides extensions to the native JS Image() object. A new Picture object can be created by 1 of two methods:
(1) Passing in an existing JS Image() object or
(2) Passing in a string representing the required Image source. Picture objects initialise themselves once the Image is loaded, and will not crash if render() is called before loading is complete
This:
- {Picture}
Parameters:
| Name | Type | Description |
|---|---|---|
image |
Image | String | MC.Point | a JS Image() object OR a string direction to one e.g. "../images/bullet_cat.jpg" OR an MC.Point which creates a blank image with width of image.x and height of image.y (the latter being ready for subsequent manipulation) |
Properties:
| Name | Type | Default | Description |
|---|---|---|---|
img |
HTML_Image | ||
loaded |
Boolean | false | Set to true once Image has been loaded |
width |
Number | 0 | Native Width of the Image, set upon loading |
height |
Number | 0 | Native Height of the Image, set upon loading |
imageData |
Array.<Number> | Raw bitmap Image data (needs width and height to be unwrapped) |
Returns:
A new Picture object
- Type
- Picture
Methods
init()
Initialises the Picture
CAUTION: This is automatically run upon image file loading. Creating a new object is always more reliable than editing properties.
render(centre, angle, widthopt, heightopt, startopt, finishopt)
Renders the picture to the canvas
See MC.draw.picture() for parameter details
N.B. this method requires EXACTLY the first 2,3 or all 6 parameters.
(1) Only using (centre,angle) means the image is drawn at 1:1 scale, centred and rotated about the centre point
(2) Adding the width,height pair scales the image to the appropriate size (in pixels)
(3) Adding the start,finish pair clips the image to a rectangle defined by start (top left corner) and finish (bottom right hand corner). Essential for using sprite sheets.
(4) If any start or finish parameter is less or equal to 1, then that ratio of the native image width/height will be applied.
A Gray Box with Red cross appears (draw.loadWarning()) is draw is this method is called and the image has not loaded
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
centre |
MC.Point | Canvas location of the centre of the image (1) | |
angle |
Number | Angle (degrees) the image is to be rotated about the centre. 0 (zero) = no rotation (1) | |
width |
Number |
<optional> |
Width image is to be displayed with (before any rotation). If used then height must be specified (2) |
height |
Number |
<optional> |
As per width, but image display height in pixels (2) |
start |
MC.Point |
<optional> |
For displaying only a section of the image, start is a point representing the top left coordinates of the section ot be displayed. If start is specified then finish has to be too (3)(4) |
finish |
MC.Point |
<optional> |
As per start above, except this is the bottom right of the selection to be displayed (3)(4) |