Hello everyone!
I’m compiling a list of the most common errors that people run into when first starting out with MakeCode Arcade. So far, I have: using a variable before you declare it, figuring out the overlaps block (Sprite kinds, using local variables), not destroying a sprite on overlap. Any other ‘gotchas’ you can think of when you first started coding with Arcade?
Thanks!
Jacqueline
Awesome project! One I had was learning to use the ‘Move sprite with buttons’ block instead of setting out a bunch of ‘On up pressed’ ‘On down pressed’ ‘On left pressed’ ‘On right pressed’ blocks!
Coding every enemy one by one instead of using sprite type blocks.
“Couldn’t read properties of null”
Using sprite data extension for sprite specific values
Using for element value for array of sprites of kind to get all sprites of the same kind
Setting player movement to 0 to stop controls
Using debug mode to check if code is running/check on the variables
Character animations instead of running them “on button pressed”
Setting UI to be relative to camera so it follows the player
Hopefully this is helpful to someone!
If you’re looking for block errors, it’s list index is out of range.
The most frustrating JS error for me as a beginner was the infamous
'Element implicitly has an any type because type has no index signature'
These are so great! Thank you all! Hopefully this list will help people who are just starting out…
From a classroom setting, 4 errors seem to occur repeatedly:
- Two functions with identical names
- Comparing strings case sensitively
- Parameters suddenly defined as new variables with the same name inside the function(don’t know how)
- All blocks suddenly disappearing from the canvas and undo not working(have not figured out how this happens)
And of course indexing errors…
Oooh! Good ones! For #4, we are working on a versioning feature that will hopefully mitigate losing code.
That would be a suberb enhancement!
Personally, I believe I mostly have experienced this when switching from text based code to blocks, especially if some error occurs during text based view or having switched between Python and JS. Not sure what the affected students are doing prior to losses in class, but I have seen and experienced it - and read about it here - enough to frequently download PNGs just to be sure…
That sounds great! Finally, the days of losing the code you worked so hard for are over!
I’ve had some fun with the error “e.findIdx is not a function” also, when trying to mix text and numbers in two-dimensional arrays…
Filed:
wait, setting player movement to 0 to stop controls is an error??? WHY???
These are all things which you should do!
There is an array of all <kind> sprites
block available!
failed cast on null
unhandled exception: an exception
Is it too late to add mine?
Things in MakeCode that can cause students trouble. These are things a volunteer will be required to help with.
Multi threaded
The runtime is JavaScript. JavaScript is single threaded. Forever loops have an implied yield in every loop. Other loops do not. Running a while do loop without a pause can disable the buttons and probably other important things. Include pause 1 at the end of loops to fix it.
There can be problems with a simulated multi-threaded model implemented in a single threaded runtime environment. With most variables being global there are plenty of chances for students to create race conditions and have no idea what is happening. You can try a refresh to see if it was something else. Usually you will need to fix it for them after class has finished because it can take a while to fix.
The color palette
You only have 15 colors plus transparent. You can change the color pallet by going to Assets then clicking on Colors then choosing a set of colors. You can also create a custom pallet. If a student creates two sprites each with a different color pallet one of those two sprites is going to look awful. The student will have to redo one sprite with the same color pallet as the other if they are going to be used at the same time.
Static typing
Because the blocks are translated to TypeScript, variable type relies on context. That can go wrong. Note: There is a string creation block under Text and a number creation block under Math. Makecode uses a string type ManagedString that is not a TypeScript native String. A ManagedString is created by dragging the " " block from the Text category.
Dragging blocks from the palette that have variables already there can cause scope issues. The for index from 0 to 4 loop is one of the biggest culprits. Sometimes the scope issues are temporary and you just need to refresh. Sometimes you will need to go into TypeScript to make changes to variable names to explicitly set scope.
Even when you do everything right you can get a type mismatch. If you make random changes sometimes the error will go away. You can try to fix it by going into JavaScript, but see below.
Arrays are statically typed. Their type is the union of all types it contains. That can cause stupid things to happen as well as error messages.
Students can struggle with problems caused by an array with two types that are not polymorphic. Arrays are best if you don’t mix the value types. Certain operations will throw errors because the type is not guaranteed in a non-homogeneous array. You might know what you are doing is correct but TypeScript doesn’t so it won’t even let you try.
Empty array
If you use empty array it will have no type and can cause you problems. You can fool the editor by creating an array with a single element of the correct type and then remove it with a remove first value from block. That gives you an empty array, but with a type.
Whenever you use the empty array block and later decide to initialize it, you cannot put constants into it by pressing the + button because it has no type yet. You will need to first add either the string creation block under Text or a number creation block under Math. Even if you started with the proper type of array, using - to remove all the values converts it to an empty array and it forgets its type.
Switching from blocks to TypeScript and back
Never open Blockly code in the JavaScript text editor. It may not be the same when you switch back to blocks. Variables with spaces are changed to underscores. Definitions are moved to random locations. Some code is left as text in a gray block that cannot be recovered nor edited. Sometimes when you make changes in JavaScript you are not allowed to switch back. If you must use JavaScript, duplicate the project first, use JavaScript, figure out how to do that in blocks, then delete the duplicate.
Blockly does not mark all errors with a !. Run time errors never tell you where it happened. You may need to switch to TypeScript to locate the error. If you need to use TypeScript to find the error just don’t edit the code too.
Where is that happening?
Sometimes it seems clear there is code doing something wrong but you can’t find it. In general, you want to arrange your code so that you can find what you are looking for. Our kids won’t do that. A stray long forgotten forever loop is often made invisible in MakeCode.
You can also use the - button to zoom all the way out to find code that is way out away from the other code. The canvas can be made huge no matter how little code you have and the kids will often get some code way off screen.
If you just can’t seem to find the definition of a function you can try to right click a calling block and select go to definition, this is supposed to scroll your screen to the definition. You still have to search the screen to find it. It can also be buried under other code.
Keep an eye on the scroll bars for hints that code is hidden in a far away corner of the canvas.
Consider right clicking the background selecting Collapse Blocks then selecting Format Code. This will put all the code into a small area making it easier to browse it all.
Unwanted variables
When you drag over a block with a predefined variable like mySprite that variable is created. Every so often you will need to clean up variables that were created unintentionally. Another technique is to rename the predefined variable after you finish adding blocks. That is not always possible of course.
One Pixel
Sprites that are a single pixel wide or tall do not always respond to on of kind overlaps of kind events. Make it two pixels wide minimum. If the sprites are moving fast enough 2 may not be enough. MakeCode only checks for overlap after each move. A sprite can jump over another sprite without overlapping it. Students find that hard to believe because they can see it with their own eyes.
I would expect the coordinates to run from 0 to 159 or 0 to 119. They run from 1 to 160 and 1 to 120. That seems counterintuitive because the documentation says 0.
Other
If you see the saving… animation running for 10 minutes or more it might be a good idea to save a local copy of your project.
Sometimes a recent project you just created does not show up in the recent projects list. Click on show all or refresh the page to find it.
Sometimes making changes to block code does not trigger the precompiler to refresh the TypeScript source code. Students will see behavior that should never happen given the current block code. Refresh the page.