Import image sprites in js: fastest

Question

I attach a code where I import .png images for use in an animation. It works but I attempted other ways I could not make work. Question:
I am scaling the images every time in draw(), how / where can I scale them just once?
The other functions alien1, or defining properties to the image or awaiting a promise to load should work as well. Do they require declarations in the html?
(Please, don't give me links but direct answers on the problem 🤗)

https://code.sololearn.com/WKf31bV4uIOi/?ref=app

Answer 1

On the re-scaling:
Maybe you could re-size the images once after load, write to a temporary canvas, re-scale and then return the scaled image from there?

Answer 2

bell would be nice to!
I'll tell you once I do

Answer 3

Kode Krasher I will my friend!! xD

Answer 4

Lisa , this is what I am trying in the two alternatives that do not work. function alien1 writes to canvas and I could choose scale there. defining a variable with image properties would also solve my problem but it displays nothing. what I need is input on what to change in my code

Answer 5

bell ah, awesome!
I just spent the last 1hr coding on my phone wo make an explanation, lol
Oh well😅
https://code.sololearn.com/W3ngK6P5FRUM/?ref=app

I wonder how I used my phone to code for the longest time ..it's too stressful, lol

Answer 6

Vachila64☕ maybe you could make your code public so we can discuss in comments? I would find interesting a benchmark displaying the imagea large number of times. the prerendering overhead happens only once, and it would be good to know if it is worth for the time saving later?

Answer 7

Kode Krasher
On the offscreen canvas as I understand it:

original image (url...) -> offscreen canvas -> resize, create an new image from offscreen canvas ("screenshot") -> drop/ overwrite original image with downsized image

I think it would be forgivable if this canvas procedure created some buzz, because it would be only once and before the actual animation. And this is bell 's goal, I think – minimize all resource intensive processes at actual animation run time?

edit:
with "url" I mean the image as you retrieve it from somewhere else – as Kode Krasher clarified it is of course not necessary to fetch the image anew each time one uses it.

Answer 8

Kode Krasher Ah, tell me before you do!
I should probably add like about 2 more checks to it but have grown to lazy to xD

Answer 9

Revma I do that in drawImage and then it works but I meant, defining it once so as to avoid resizing every time
I do not know how in this code: (lines 383,384)

https://code.sololearn.com/WfL4CZPfHsWv/?ref=app

Answer 10

Martin Taylor Revma I was trying to do precisely this and then using drawImage on r3 (below) but it does not display the aliens. I do not know what I am missing in my code (now it loads the image in a different way). I am not particularly interested in developing games. Actually I am trying to generate Escher tesselations with a few self-organisation rules. So I would like to display motifs out of Escher drawings. I prefer vanilla js to libraries, whatever their merits. I want to make my code more efficient and understand the issues I described.

const r3 = {
img: new Image(),
src: "https://art.pixilart.com/2b2f3aabe30daa5.png",
column: 0,
row: 0,
width: 200,
height: 200,
scaleWidth: 64,
scaleHeight: 64
};

Answer 11

Revma yes, what you describe is what my alien1 function tried to do. I have found references about it working, and it works for canvas drawings (see tile function). I use this in my crystallization code but not yet with an external image. Thank you!

Answer 12

Martin Taylor i am using drawImage now and scaling the alien many times each frame, it would surely be better to scale it once and copy it every time? As in the r3 definition in my code and previous post. But something must be wrong with it because it does not display when I use it. Thank you

Answer 13

Revma this does not answer my question. I have solved the problem in practice in the code. I still have three questions, for which I would like to learn the answer but thanks for trying on the code. Maybe I should trim it down before asking. It is full of stuff.
To answer your question, I would anyway prefer to retain the flexibility to scale to be able to adapt to large or small displays. what looks good on an ipad does not necessarily on a phone.

Answer 14

Vachila64☕ I will read your code, the time benchmarking is especially interesting. Thanks for taking the time. If you look into my chaos of a code you will see that it contains three prerendering functions. Two were working, the third was not.
So it does not save time to scale beforehand? That is unexpected.

Answer 15

questions acquire a life of their own... actually, my question was
1- finding an error preventing two of the functions in my code to run
2- which of them would be better (as my working implementation could not be best)
it was a loading order issue, resolved calling the function in init.
Answers were about many related -and interesting- aspects but not the problem with my code I was asking about. I quite sympathize with anyone my untidy code scares off. Still, thank you to everyone!, it is nice to discuss a topic one is occupied with

Answer 16

one of the solutions was actually taking part of a larger image, to cut tiles off. I had seen this in one of Mirielle[ Left SL ] and did not understanfpd why the tile was invisible in mine

Answer 17

I could not get the ways called in line 21 or line 24 work

Answer 18

Lisa please, dont apologize, thanks for trying to help. i did not explain well 🤗🎂I am frustrated because for instance the .img solution I took from one of mirielle's games and I do not know why it does not work for me. it may be something with loading order

Answer 19

Hmm, so the canvas alternative doesn't work for you?

Answer 20

Vachila64☕ I solved my problem, which I think was indeed related to loading order. Declaring this line in my init function
r3.img.src = r3.src;
makes it work. Then I can regulate the remaining properties of the r3 constant
(at least if I know my source, which I do not since it was one of Caleb's aliens). I think I should delete my question now.