Create Your Own Shareable Shooting Game in Just Minutes
We’re going to show you how to take this shooting game, make it your own, and then share it to the world with a link that will play on iOS, Android, and desktop computer.
And we’ll make this game from within the browser. One caveat: that browser has to be Chrome on desktop.
This is made possible by Ourcade: a zero install, zero config, low code, instant publish games platform. Ourcade is in alpha so you may come across a bug or two.
The game we’re going to make is a shooting gallery game. Similar to those carnival games where targets pop in and out and you have to hit them with a plastic rifle.
We will use Ourcade’s Shooting Gallery Demo to start. Take a look at the project here. Make sure you are using Chrome!
Duplicate and Elaborate
First thing we are going to do is duplicate the project so that we can make our own changes. We’ll get a complete copy of the Shooting Gallery Demo from which we can make our improvements.
Find the green Duplicate button near the top right of the screen and click it. You’ll get a loading screen as Ourcade does the duplication. Once done you’ll be sent to your copy of the project.
You’ll see that the Duplicate button is gone and there’s a Save button in its place. This is now your game. 🎉
Name Your Game
The easiest customization is to give your game a new name. The demo project is named: “Shooting Gallery Demo”. That’s not a very sexy name.
Think of something more interesting like “Duck Season”. Or “Rabbit Season” if that’s more your thing.
You’ll need to open the Settings screen to change the project’s name. Click on the vertical 3 dots menu next to the Save button and select “Settings”. Then enter a new name and save the change.
Update the TitleScreen
Once you have a name it is time to update the title screen. Ourcade uses a concept called Scenes. If you’ve worked with Unity, cocos2D, or SpriteKit then you’ll be familiar with the concept. If not just think of it as a stage where you can setup a particular part of the game such as a level, room, or lobby like we have with the title screen.
To open the TitleScreen Scene use the Project Panel located at the bottom left of the screen. You’ll see a project tree and a panel next to it showing the various files that belong to the selected folder. Pick the “Scenes” folder to open it and then click on “TitleScreen.scene”.
Options will appear in the Inspector Panel on the right side. You can rename the Scene, delete it, or open it. Click “Open” to load it so we can make changes.
It is possible that the project started with the TitleScreen Scene loaded already. You can tell by looking at the Scene Panel on the left side of the screen and checking what the name at the root is.
If you’ve used a game engine editor like Unity or Cocos Creator then this should all look familiar. The Scene Panel shows a tree representation of everything in the Game Preview (the middle area under the Play button showing the game).
You can select items by clicking on them in the Scene Panel or the Game Preview. More information about each item shows up in the Inspector Panel on the right. You can adjust position, scale, rotation, color, etc.
We are going to change the title text so expand the “Title” node from the Scene Panel to see 4 children. We are using 2 labels for each word to achieve a drop shadow effect. Each word has a different color so we split the title into 2 sets of labels giving us 4 labels.
If your new name is “Rabbit Season” then select the DuckLabel node and change the Text field under the Label header from “DUCK” to “RABBIT”. You can also pick a color that better represents rabbits by clicking on the Color field. Adjust the Rect Width value if your text gets cut off.
You’ll have to make the same text change to DuckLabelShadow for the drop shadow to look right. You can also rename both nodes to “RabbitLabel” or whatever new name you chose by clicking on the Pencil icon in the Name field at the top of the Inspector Panel.
Try it out by pressing the Play button above the Game Preview. 😎
Other things to try:
- move the ducks around
- change the ducks to rabbits or something else (find them in the Environment node)
- change the positioning of the title (all on one line, offset from each other, rotated, etc)
- make it night by changing the Scene’s background color to a dark blue (select the Scene root to find that option)
- change the “Start Hunting!” button colors and text (select the PlayButton node to find those options)
Adding new Images
Let’s say you hate ducks or you love ducks and no one should be shooting them. You can add new images to use by clicking the create button on the upper right of the Project Panel.
I like to be organized so I’ve selected the Textures folder to put the new images into. You can always move them into the Textures folder later if you are a “organize later” kind of person.
You’ll get a dialog with a list of various things you can create. Give it a browse if you are curious. We are just going to use the Image option. Select it and you’ll be prompted with an upload dialog where you can choose files from your computer.
Expand the Environment node in the Scene Panel and select Duck1. The Inspector Panel will show a Sprite header with a Texture field. Drag your uploaded image from the Project Panel into the Texture field to change the duck. 👏
Now adjust your new image position, scale, or rotation to your liking from the Inspector Panel. For example, I adjusted the scale of my rabbit:
You can now do this for everything else in the TitleScreen Scene. Here are some ideas:
- change the remaining ducks to rabbits or something else
- change the rifle to a water gun
- change the trees to be carrot tops or other plants
- add some rocks to the ground
- add a sun to the sky
You can find all kinds of gorgeous free assets from Kenney. ❤️
Change the Game Targets
The last thing we’ll go over is how to change the targets in the game. First open the Game Scene like we did with the TitleScreen Scene earlier. The Game Scene is located in the Scenes folder.
Ourcade uses a concept called Repros. They are pre-configured Scene items that we can make copies from while the game is running. Otherwise we’d have to create a bunch in the Scene ahead of time to account for an unknown number of copies during game play — maybe there’s 2 enemies in this case and 50 in another case.
If you’ve used Unity then you can think of them as Prefabs.
The targets in this game are Repros and you can find them in the Repros folder. There’s a BrownDuckTarget, WhiteDuckTarget, and YellowDuckTarget. To edit them we have to drag them from the Project Panel into the Scene Panel.
Drag the BrownDuckTarget.repro and drop it onto any blank part of the Scene Panel. You’ll then see it in the Game Preview. You can make changes to it like any other item in the Scene.
Expand the BrownDuckTarget (Clone) node in the Scene and find the Duck node to change the Sprite’s Texture field. There is also a Target node in the Duck node that has a version of the duck with a target on it.
In this game you get negative points for hitting a non-target.
Change the Duck and Target Textures to images that better fit your game. You may need to whip out PhotoShop or Paint to make some adjustments. You can also do what I did:
I just added a target icon image as a child of the Target node. You can create a new Sprite by clicking on the Scene Panel create button (shown on the top left of picture above by the green rectangle). Make sure to have the Target node selected so that the new Sprite node is added as a child.
Then I just used the “icon_target” asset from Kenney’s shooting gallery pack.
After you’ve made your changes you need to apply them to the Repro. Select the root of the Repro clone — BrownDuckTarget (Clone) in this case — and hit the Apply Changes button at the top of the Inspector Panel.
Once you’ve pressed that button you can delete the Repro clone from the Scene Panel. Your changes will have been saved. You can test it by deleting the clone from the Scene and then adding it back.
Delete items from the Scene by using the Delete button (trash can icon) to the right of the Apply Changes button.
Try out your changes in the game by pressing the Play button. You should see your new target coming out with the ducks. 🎉
Other things to try:
- change the 2 other duck targets to better fit your game
- change the rifle into a water gun if you did that earlier (or tomato launcher)
- change the bullet hole into a water splash or exploded tomato (see the BulletHole.repro in the Repros folder)
- change the waves if your characters don’t swim
- change the curtains to plants, rocks, or some other environment
- change the background to a burning city if you are shooting zombies
Getting Fancy with Code
We won’t go into programming in this article but Ourcade has a complete coding environment. You can bring up the Script Editor by selecting any Script in the Scripts folder.
Ourcade supports modern JavaScript and TypeScript. The shooting gallery demo we used in this article was written in TypeScript.
You get syntax highlighting, static analysis, and code completion. And if you really run into a problem you can bring up Chrome’s Developer Tools and use the debugger. Just search for your Scripts by name.
You can learn more about writing code in Ourcade by taking a look at this guide.
Sharing Your Game with a Link
Once you are happy with what you’ve made you can publish instantly.
But before you do you should consider:
Once you’ve gotten those things squared away you can simply go to the Settings Menu (vertical 3 dot menu to the right of the Save button) and select Publish.
Ourcade will send your game to our hard working elves on standby. Once published a new option in the Settings Menu will appear called “View Published Page”. Click it to open your game’s unique link.
Now you can share it with the world! 🎉
For more resources check out Ourcade’s documention and this quick start guide.
You can also send us a message on Twitter or Discord. We’d love to hear what you think!
Ourcade is in Alpha so you’ve probably run into some bugs. Let us know about them and try refreshing the page to see if that helps.
