186,314

Views

Beginner

Level

68

Comments

Crash Course 2: Invaders - Part 6

by Hectate (Updated on 2015-02-01)


Part 6: Creating a Scene

Step 32: Click Scenes in the Dashboard, then we need to click the dotted line box to create a new Scene.

Step 33: After we hit that button, a dialog (shown) will pop up that lets us set some basic parameters for your Scene. Note you can choose the size of your Scene either using Tiles (which will use the Tile Width and Height, as shown) or in pixels. In this case we’re using Tiles and will use the default values, as shown. Let's give it a name of "Level One", and then as usual, we click Create to get Stencyl to make our new scene for us.

Once we do, Stencyl will open up our new scene in the Scene Designer.

Scene Editor


Step 34: To keep things simple, we’re only going to add the background image we imported earlier rather than add any Tiles. Backgrounds are one of the layer types we can have in our scene. To add one, we need to click the small + icon in the Layers list. In there we select New Background Layer.

Step 35: The "Choose a Background" dialog box will appear for us, and we can click on our Stars background and then click OK.

Step 36: Notice that our new Stars background layer is higher in the list than the default "Layer 0"? This means that if we try to add anything to Layer 0 it will be underneath our Stars background! Clearly this is not ideal, so to prevent this from happening, let's move the Stars background to the bottom of the Layers list. We can do this by clicking the down arrow at the bottom of the Layers list while the Stars background is selected.

Now our intial setup of the scene is done, and the main window of the Scene Designer should look like the image below.

Step 37: We’ve got our Scene, so let’s test it. Press the green Test Scene button and after a few moments we should see our Scene appear in a browser.

If the Scene appears, everything is working, and we can move ahead. If not, we can get help by clicking on the Need Help button and then choosing an option in the dialog that pops up. Let’s keep going

Step 38: Click the Actors tab in the Scene Designer, in the Palette on the right. You should see the three Actor Types you created earlier.

Step 39: Now we want to place individual Actors in the Scene. When placing actors, they are put on the Layer that is currently selected. As a result, we need to remember to click on Layer 0 to select it as the current layer.

To place actors, we use the Pencil tool as shown below; select it now if it is not already active.

With the Ship selected from the Actor Type list, Layer 0 selected (and above the background layer!) and the Pencil tool active, move our cursor over to the bottom-center of the Scene and left-click once. The Ship will appear. We only want one Ship for the player to control.

Note that we want the Ship to be within the scene boundaries, so don't put him in the grey "out of bounds" area! Put him inside the scene like in the image below.

Tip: To place Actors at even intervals, hold down the Shift key, which will align an Actor with the Tile grid. You can make the grid appear by pressing the Show Grid button.

Step 40: Next, select the Enemy Ship so we can place a few in the Scene. We can use the Shift key to space them evenly as shown in the image below.

Tip: If any of your Actors don't appear on screen even though you placed them in the Scene, make sure you check the game window's (the viewport's) settings. Its Width should be 640 and Height should be 480. Click Settings and then Display to change this. If you place an Actor outside the bounds of the viewport, you will not see the Actors you placed in your Scene. Also, note you can make a Scene that is larger than the game's viewport. To allow the player to see and move to other parts of the Scene, you'll need to implement a camera and camera scrolling, but doing that is outside the scope of this Crash Course. You can read more about implementing a camera here.

Step 41: Now we have a basic, complete Scene. Make sure it works via the Test Scene button again. We should see your Ship at the bottom of the Scene and the five Enemy Ships hanging out near the top.

We've got our Actors and Scene set up, so now it's time to start learning how to use Stencyl's Design Mode. To start, we're going to add background music to our Scene.

Click here to go to Part 7.

Disclaimer: Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!

68 Comments

krone
to fix the tiny background problem: when you import the image change the "Resize Method" to "No Smoothing".... took me a few mins to work out.
0 2 years, 9 months ago
VauSoftware
The images are way too small!
1 2 years, 11 months ago
Bryhannah
If your background is showing up with the image just in the upper left corner, make sure when you're creating the "Stars" background that you check the "Repeat Image" box. Took me forever to notice it, lol!
4 3 years, 2 weeks ago
steamfunk
Every time i try to import the god damed sounds it wont FFFFING work!!! i have tried about 12 times now!!. I downloaded the stuff i needed from this supposed tutorial ? some BULL about metadata appears, it will not even let me drag and drop?? any one know what the hell i am doing wrong?? ive followed the tutorial TO THE LETTER ABOUT 12 TIMES. and stiill no joy, computer is about to be launched out the window!!
1 3 years, 1 month ago
PencilStencyl
Step 36: I think while my computer download the files for this crash course, it didn't download some of the pixels. A.K.A a lot of white specks and a entire line is on the .png file of the background.
0 3 years, 3 months ago
katriana89
Unexpected problem on thread AWT-EventQueue-0: null
java.lang.NullPointerException
at stencyl.sw.editors.scene.palette.Ac torPanel.paintComponent(ActorPanel. java:208)
at javax.swing.JComponent.paint(JCompo nent.java:1054)
at javax.swing.JComponent.paintToOffsc reen(JComponent.java:5222)
at javax.swing.RepaintManager$PaintMan ager.paintDoubleBuffered(RepaintMan ager.java:1572)
at javax.swing.RepaintManager$PaintMan ager.paint(RepaintManager.java:1495 )
at javax.swing.RepaintManager.paint(Re paintManager.java:1265)
at javax.swing.JComponent._paintImmedi ately(JComponent.java:5170)
at javax.swing.JComponent.paintImmedia tely(JComponent.java:4981)
at javax.swing.RepaintManager$4.run(Re paintManager.java:824)
at javax.swing.RepaintManager$4.run(Re paintManager.java:807)
at java.security.AccessController.doPr ivileged(Native Method)
at java.security.ProtectionDomain$1.do IntersectionPrivilege(ProtectionDom ain.java:75)
at javax.swing.RepaintManager.paintDir tyRegions(RepaintManager.java:807)< br /> at javax.swing.RepaintManager.paintDir tyRegions(RepaintManager.java:782)< br /> at javax.swing.RepaintManager.prePaint DirtyRegions(RepaintManager.java:73 1)
at javax.swing.RepaintManager.access$1 300(RepaintManager.java:64)
at javax.swing.RepaintManager$Processi ngRunnable.run(RepaintManager.java: 1720)
at java.awt.event.InvocationEvent.disp atch(InvocationEvent.java:311)
at java.awt.EventQueue.dispatchEventIm pl(EventQueue.java:749)
at java.awt.EventQueue.access$500(Even tQueue.java:97)
at java.awt.EventQueue$3.run(EventQueu e.java:702)
at java.awt.EventQueue$3.run(EventQueu e.java:696)
at java.security.AccessController.doPr ivileged(Native Method)
at java.security.ProtectionDomain$1.do IntersectionPrivilege(ProtectionDom ain.java:75)
at java.awt.EventQueue.dispatchEvent(E ventQueue.java:719)
at java.awt.EventDispatchThread.pumpOn eEventForFilters(EventDispatchThrea d.java:201)
at java.awt.EventDispatchThread.pumpEv entsForFilter(EventDispatchThread.j ava:116)
at java.awt.EventDispatchThread.pumpEv entsForHierarchy(EventDispatchThrea d.java:105)
at java.awt.EventDispatchThread.pumpEv ents(EventDispatchThread.java:101)< br /> at java.awt.EventDispatchThread.pumpEv ents(EventDispatchThread.java:93) at java.awt.EventDispatchThread.run(Ev entDispatchThread.java:82)

What should I do with this ? my test scene went okay though. Pls,. adv. Tx.

5 3 years, 4 months ago
DarkTikiStudios
I received this error when I attempted to test with the actors in place:

Unexpected problem on thread AWT-EventQueue-0: null
java.lang.NullPointerException
at stencyl.sw.editors.scene.palette.Ac torPanel.paintComponent(ActorPanel. java:208)
at javax.swing.JComponent.paint(JCompo nent.java:1054)
at javax.swing.JComponent.paintToOffsc reen(JComponent.java:5222)
at javax.swing.RepaintManager$PaintMan ager.paintDoubleBuffered(RepaintMan ager.java:1572)
at javax.swing.RepaintManager$PaintMan ager.paint(RepaintManager.java:1495 )
at javax.swing.RepaintManager.paint(Re paintManager.java:1265)
at javax.swing.JComponent._paintImmedi ately(JComponent.java:5170)
at javax.swing.JComponent.paintImmedia tely(JComponent.java:4981)
at javax.swing.RepaintManager$4.run(Re paintManager.java:824)
at javax.swing.RepaintManager$4.run(Re paintManager.java:807)
at java.security.AccessController.doPr ivileged(Native Method)
at java.security.ProtectionDomain$1.do IntersectionPrivilege(ProtectionDom ain.java:75)
at javax.swing.RepaintManager.paintDir tyRegions(RepaintManager.java:807)< br /> at javax.swing.RepaintManager.paintDir tyRegions(RepaintManager.java:782)< br /> at javax.swing.RepaintManager.prePaint DirtyRegions(RepaintManager.java:73 1)
at javax.swing.RepaintManager.access$1 300(RepaintManager.java:64)
at javax.swing.RepaintManager$Processi ngRunnable.run(RepaintManager.java: 1720)
at java.awt.event.InvocationEvent.disp atch(InvocationEvent.java:311)
at java.awt.EventQueue.dispatchEventIm pl(EventQueue.java:749)
at java.awt.EventQueue.access$500(Even tQueue.java:97)
at java.awt.EventQueue$3.run(EventQueu e.java:702)
at java.awt.EventQueue$3.run(EventQueu e.java:696)
at java.security.AccessController.doPr ivileged(Native Method)
at java.security.ProtectionDomain$1.do IntersectionPrivilege(ProtectionDom ain.java:75)
at java.awt.EventQueue.dispatchEvent(E ventQueue.java:719)
at java.awt.EventDispatchThread.pumpOn eEventForFilters(EventDispatchThrea d.java:201)
at java.awt.EventDispatchThread.pumpEv entsForFilter(EventDispatchThread.j ava:116)
at java.awt.EventDispatchThread.pumpEv entsForHierarchy(EventDispatchThrea d.java:105)
at java.awt.EventDispatchThread.pumpEv ents(EventDispatchThread.java:101)< br /> at java.awt.EventDispatchThread.pumpEv ents(EventDispatchThread.java:93) at java.awt.EventDispatchThread.run(Ev entDispatchThread.java:82)

2 3 years, 4 months ago
scottwansor
Every time I import assets the Alien Grabber's behavior Alien Movement imports missing key behavior blocks such as Slide and Increase speed as well as any other logic that is associated with this. It makes this impossible to complete at this point because I can't compile and test the scene as the code is filled with blank chunks of 'if' statements. I am not sure if this is my issue, or an issue of the assets being incorrect or broken, but it is extremely frustrating.
0 3 years, 4 months ago
carrcoders
If you get to step 34 and have an Atlases tab instead of a Backgrounds one, go to the lower right of the screen where there's a box with "Layers" and "Inventory", and at the bottom a , -, up and down arrows and another icon. Click on the sign, and select "New Background Layer", then you should be able to select the Stars image.
0 3 years, 6 months ago
23rushr
How to fix the Background problem:

1.Go to Dashbourd
2.Go to Backgrounds
3.Click on the space background.
4.Click on attach to scene.
5.Instantlys goes to level one and puts the background in.

0 3 years, 6 months ago

Sign In to Comment