Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
(+1)

hello!! my problem is that i have a canvas at a specific size, and i want to put an image inside the canvas without changing its size... is there a way to paste it to fit the canvas, or will i have to resize my image manually?

(1 edit) (+1)

If you have an image in your clipboard, you can paste it into a canvas without altering the size of the canvas by using the Listener. The image is represented in your clipboard as a string that probably looks something like "%%IMG3..."


thatCanvas.paste[image["%%IMG3..."]]

If you wanted to center the image within the canvas, you could tweak this recipe a little. You may also want to clear the canvas before pasting if you already have something drawn on it:

i:image["%%IMG3..."]
thatCanvas.clear[]
thatCanvas.paste[i .5*thatCanvas.size-i.size]

The Listener is also really handy for things like setting widgets to a precise size:

thatCanvas.size:120,100

How's that?

(+1)

thank you! but i also wanted to ask .. is there a way for the original image to resize into the canvas' size? like if the original image was bigger than the canvas? 

(also im not as familiar with lil as i should, but what does the i in i:image["%%IMG3..."] mean? is it like a variable? (and i wanted to know what exactly thatCanvas.paste[i .5*thatCanvas.size-i.size] meant... hope this isnt too much ;;)

(1 edit) (+1)

Commands in the Listener are statements in Lil, Decker's scripting language. If this is your first exposure to Lil, you may want to have a look at The Phield Notes  or the Lil reference manual.

Breaking those examples down a bit more,

"%%IMG3..." is a string representation of an image. The image[] function constructs an Image Interface from such a string. In Lil, the colon (:) is an assignment operator. You can read it aloud as "gets" or "becomes". The phrase

i:image["%%IMG3..."]

Constructs an Image Interface and assigns it to a variable named "i". When you define variables like this in the Listener, you can refer to them in subsequent queries, or additional expressions in one query:


Both Images and Canvas widgets have a ".size" attribute giving their dimensions:


Sizes are represented as a list of two numbers- the width and height, respectively, in pixels. In Lil, all arithmetic operators have uniform precedence, applying right to left unless overridden by parentheses. Arithmetic operators also generalize across lists; subtracting them subtracts them element by element. Multiplying a list by a single number "spreads" that number to each element of the list:


Offsetting the top left corner of the pasted image by half of the difference between the size of the image and the canvas will center the image within the canvas.

Instead of specifying a position for drawing our pasted image with (x,y) coordinates, we could specify a position AND a width and height to stretch/crunch the image to fit, like so:

i:image["%%IMG3..."]
thatCanvas.clear[]
thatCanvas.paste[i (0,0),(thatCanvas.size)]

Is that a bit clearer?

(+1)

yes, that worked!! thank you so much for the explanation :D