Image Editor not shown in Tutorials using code

Arcade
1

I teach Middle School Computer Science. We are just starting to use some of the Arcade tutorials. A few of my students would rather type code than use block because they find it more challenging and fun. I found a few of the tutorials, like Chase the Pizza and Happy Flower give them the option of choosing JavaScript and Python. However, when they are following the tutorials in this way, they get to a point where it asks them to create a sprite using the Image Editor, which doesn’t seem to be available to them when they are on the track of typing code. I wondered if there is something we are doing wrong? We are working in Chrome, but I tried it in Safari as well and it doesn’t show there either. I know the screenshot shows a code error, but I think that might be related.

Screenshot 2024-03-29 at 12.02.22 PM
Screenshot 2024-03-29 at 12.02.22 PM2172×1348 395 KB

.

1 Like
2

In JavaScript, creating a sprite with an empty image is this:

mySprite = sprites.create(img`.`, SpriteKind.Player)

Notice those are backticks, not apostrophes. The backtick (technically, in English, it’s called a grave accent) on U.S. keyboards is in the numeric row above the letters, to the left of the 1 key.

In Python, the same code is written as:

my_sprite = scprite.create(img("""."""), SpriteKind.Player)

When you add an image marker like the above to your code, the image editor becomes available. You access it by selecting the artist pallette next to the line number.

3

Thank you! This is greatly helpful. I have never used a backtick, or grave accent, before. You saved my lesson!

1 Like
4

Another tool that may be helpful to you: The toolbox still works! Instead of blocks, it contains code snippets that can be dragged into your code editor. Be sure to give it a try and demonstrate it to your students!

And welcome, @MsGatWA ! Glad to have you here, and so glad to hear that you are using MakeCode in your classroom!