Maker.io main logo

Wakanda Forever Game

2023-04-18 | By Adafruit Industries

License: See Original Project Displays LED Strips

Courtesy of Adafruit

Guide by John Park

Overview

Code your own Black Panther: Wakanda Forever game using ‎MakeCode Arcade!‎

Start with this great tutorial, and then customize or build your own ‎totally new game using the excellent art assets provided.‎

The game build in this guide also includes optional NeoPixel ‎Vibranium Gauntlet blasts when run on the PyGamer!‎

 

 

game_2

Parts

If making a DIY NeoPixel Y-splitter, you'll need two JST PH 2mm 3-‎pin socket cables, and one JST PH 2mm 2-pin plug cable.‎

or:‎

Code the Game

code_3

Start Here

If you're new to MakeCode Arcade, check out this intro as well as ‎some of these Learn Guides on making games with MakeCode ‎Arcade.‎

You can also check out this great video playlist from Microsoft's ‎MakeCode team, as well as the MakeCode Arcade Game of the ‎Week series.‎

Wakanda Forever Game

Click the button below to open the game in the MakeCode Arcade ‎site in your web browser (it should open into a new window).‎

Wakanda Forever Game

You can play the game in the browser and then continue below if ‎you want to see how it's made and customize it.‎

Click on the Edit Code button in order to customize the code.‎

edit_4

code2_5

Extensions

Some extensions are used to add functionality to the program. From ‎the Advanced category section, in the Extensions item, the following ‎are added:‎

  • Sprite scaling to allow re-sizing of the character sprites

  • Background scroll to create multi-plane camera background ‎layers

  • Light to use NeoPixel strips

  • Feather to add the Feather pins necessary to plug NeoPixel ‎strips into the PyGamer hardware

feather_6

backward_7

light_8

feather_9

Title Sequence Function

A function called title sequence is used to place all of the opening ‎title blocks in a single place that can be called from the main startup ‎block when the game begins.‎

The text sprite blocks create the three lines of text, "Black Panther", ‎‎"WAKANDA", and "FOREVER".‎

The sound block creates an ascending alert tone.‎

tone_10

BG Layers Setup Function

Using the Background Scroll extension, a set of different background ‎layers are created -- these were extracted from the tutorial image ‎using copy, paste, and erase!‎

This gives the game the illusion of depth using the parallax effect. ‎

layers_11

NeoPixel Setup Function

Add the Light extension to MakeCode Arcade. ‎

First, open the Advanced category section and click on the ‎Extensions item.‎

Next, click on the light extension, which adds the blocks we need.‎

Click the Light category to see the available blocks. Now you can ‎click on the "..." category under Light to get the NeoPixel strip blocks.‎

Create a function called NeoPixel setup and add the strip blocks ‎shown here.‎

setup_12

setup_13

setup_14

setup_15

Vibranium Gauntlet Blast Function

This function will be called when the NeoPixel strand shoots a blast -‎‎- this is done by advancing the bright "photon" pixel by three and ‎doing so ten times. The strand has 30 LEDs, so this will blast forward ‎through the whole strip.‎

function_16

Character Setup Function

In this function, the two-character sprites are created and defined as ‎‎"player" and "enemy", which are tags that are used for other ‎behaviors later.‎

The character sprites are then scaled up in size to make them ‎appear bigger on screen.‎

Shuri's position is set at the start, and the "stay on screen" flag is ‎set on so she can't be moved off screen.‎

Namor is set to follow Shuri with a speed of 40.‎

Finally, Shuri is set to be controlled with the d-pad at a velocity of 100 ‎on x and 220 on y.‎

character_17

speed_18

On Start

The on start loop runs once at the beginning of the game to set up ‎or run a number of commands and functions.‎

The started flag is set to false in order to prevent a button from ‎firing projectiles until the game has started.‎

The title sequence function is run, followed by the BG setup ‎function.‎

Then, after a short pause, the title text sprites are removed from the ‎screen, and then a long text is shown that says "Battle Namor! But ‎don't get hit!!".‎

The character setup function is run, and Shuri's life counter is set to ‎‎10.‎

The started variable is set to true, and then the NeoPixel ‎setup and Vibranium Gauntlet blast functions are called.‎

start_19

Namor Projectile Loop

All forever loops are run continuously once the game has started. ‎This one is used to have Namor fire projectiles at Shuri at a ‎randomized interval.‎

loop_20

Namor Motion Constraint

Since the follow loop is running constantly to have Namor move ‎toward Shuri in both x and y, we want to limit that motion to only the ‎y axis. This is done here by setting Namor's x position to 138 ‎constantly.‎

constraint_21

Fire Button

Whenever the A button is pressed, the check is made to see if the ‎game has started (based on the state of the started variable).‎

Then, if that check passes, a projectile is emitted from Shuri's sprit, ‎and sent on the x-axis at a velocity of 225 vx.‎

When the projectile hits a wall or sprite it is destroyed.‎

Each time the projectile is fired the Vibranium Gauntlet blast ‎function is called to light up the NeoPixel strip.‎

fire_22

Shuri Hit

If Shuri is hit by Namor's projectile, her life count decrements by one, ‎a sound effect is played, and Namor's position is reset to a random ‎location on the y-axis.‎

hit_23

Namor Hit

When Namor is hit by Shuri's projectile, the score is incremented by 1, ‎a sound effect is played, and Namor's position is reset.‎

hit_24

Shuri Wins

When the score reaches 10, the player wins! Namor is destroyed, a ‎‎"We are safe!" text is displayed, and Shuri proclaims, "WAKANDA ‎FOREVER".‎

Then, the confetti effect plays, and the game is set to over with the ‎WIN condition.‎

wins_25

Next Steps

Ready to up your game? For an added challenge, now try to add ‎features, such as extra life power-ups, add new levels, and adjust the ‎difficulty!‎

Build the PyGamer Case

case_26

Here's how to assemble the laser cut acrylic case for the PyGamer. ‎The kit comes with seven pieces of acrylic, and four screws and nuts. ‎You've gotten button caps to pick from (you'll pick four), and you'll ‎also want to connect the speaker and battery for the full portable ‎experience.‎

assemble_27

Prep

If you haven't already, remove the clear plastic screen protector film ‎from the PyGamer display.‎

display_28

display_29

Paper Protection

Remove the protective paper backing from both sides of all the ‎acrylic pieces.‎

paper_30

paper_31

paper_32

Speaker

Plug the speaker into the speaker port on the PyGamer.‎

Then, remove the white oval plastic ring to expose the adhesive and ‎press the speaker to the PyGamer where the silkscreen oval outline ‎indicates.‎

speaker_33

speaker_34

speaker_35

Battery

Plug the battery into the on-board connector. Very carefully, bend ‎the wires so that the battery fits the spot shown.‎

battery_36

battery_37

battery_38

Button Caps

Pick four of the button caps and click them into place on the square ‎shafts of the buttons. Which color combo will you choose?!‎

buttons_55

buttons_56

buttons_57

Case Layers

The case assembly is pretty simple. Place the clear top side piece on ‎as shown.‎

Next, place the smoked gray piece on.‎

case_39

case_40

Spacers

Flip the board over, then place the four spacer pieces onto the back ‎as shown.‎

spacers_41

spacers_42

Backing

The last piece to go on is the thin bottom layer with the Feather ‎header cutouts.‎

backing_43

Fasteners

Push the four screws through from front to back, being sure they go ‎through the holes in all layers and the PyGamer.‎

Screw on the nuts to secure things. Hand tight is fine -- you don't ‎want to crack anything by using excessive force.‎

fasteners_44

fasteners_45

secure_46

secure_47

secure_48

That's all there is to it -- you're ready to play with your PyGamer in its ‎excellent, stylish case!‎

Play on PyGamer with Vibranium ‎Blast Strips

 

 

First, follow this page to load the game onto your PyGamer or ‎PyBadge.‎

Plug the NeoPixel strip into the 3-pin JST connector marked D3 as ‎shown here.‎

plug_49Wakanda Forever Game

Turn on the PyGamer and the game will start. Once you get past the ‎loading screens, the NeoPixels will light up.‎

turn_50

lights_51

Advance DIY Double Strand Hack

Double Blasters

Despite being listed in the NeoPixel strip pin list, the D2 JST plug ‎can't be used in MakeCode Arcade at the moment. However, there's ‎another way to use double Vibranium Gauntlet blaster strips! Since ‎NeoPixels can run in parallel, a DIY wire y-splice will do the trick. See ‎this guide for more on wire splicing.‎

Here, the ground, 3.3V and data pins from the D3 JST port have been ‎spliced to two adapter cables.‎

By plugging in a pair of strips to the adapter, you get twice the ‎NeoPixel action! They will run identically to each other, which works ‎well in this case.‎

blasters_52

blasters_53

blasters_54

制造商零件编号 4242
PYGAMER FOR MAKECODE ARCADE, CIR
Adafruit Industries LLC
制造商零件编号 3919
ADDRESS LED STRIP SERIAL RGB
Adafruit Industries LLC
制造商零件编号 4046
JST PH 3-PIN SOCKET TO COLOR COD
Adafruit Industries LLC
制造商零件编号 4336
JST PH 3-PIN PLUG-PLUG CABLE
Adafruit Industries LLC
制造商零件编号 4227
SPEAKER 8OHM 1W TOP PORT 96DB
Adafruit Industries LLC
制造商零件编号 4238
CASE ACRYLIC BLK
Adafruit Industries LLC
制造商零件编号 4277
PYGAMER STARTER KIT
Adafruit Industries LLC
Add all DigiKey Parts to Cart
Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.