Getting started

In this tutorial you will get a short overview on how to start working with Panda 2.

First you need to create new project, do it by clicking on the "New project" button.

Popup window will ask you to select a folder where you want to place your project. Next enter name for your project folder and click OK.

Once your project is loaded you will see the main user interface.

On the left is the sidebar, next is the code editor and at the right is the game view.

Your game will be made from classes, so first we should create one. Go to the empty line number 12 and click on the small plus button on the bottom right of the sidebar.

game.createClass('', {
    init: function() {
        
    }
});

A bunch of code will appear from nowhere!

game.createClass('Player', {
    init: function() {
        
    }
});

Now you can name your class. The cursor will be already at the right place, so just go ahead and type.

Next click on the Save button.

Your new class will appear on the sidebar.

Next we need some assets. Your new project comes with one asset. If you switch the sidebar to the Assets view you can see file named panda.png on the sidebar.

game.module(
    'game.main'
)
.body(function() {
    
game.addAsset('panda.png');

game.createScene('Main', {
    init: function() {
        
    }
});

game.createClass('Player', {
    init: function() {
        
    }
});

});

In order to use that asset, we need to first load it. You can add assets to loading queue with game.addAsset function.

Now the file panda.png will be loaded. Let's use that file in your class.

game.module(
    'game.main'
)
.body(function() {
    
game.addAsset('panda.png');

game.createScene('Main', {
    init: function() {
        
    }
});

game.createClass('Player', {
    init: function() {
        this.sprite = new game.Sprite('panda.png');
    }
});

});

Now your class will have variable called sprite that contains instance of the Sprite class, which uses panda.png as a texture.

game.module(
    'game.main'
)
.body(function() {
    
game.addAsset('panda.png');

game.createScene('Main', {
    init: function() {
        var player = new game.Player();
    }
});

game.createClass('Player', {
    init: function() {
        this.sprite = new game.Sprite('panda.png');
    }
});

});

Now that you have your class ready, it's time to use it. In your Main scene's init function, create new instance of your class.

game.module(
    'game.main'
)
.body(function() {
    
game.addAsset('panda.png');

game.createScene('Main', {
    init: function() {
        var player = new game.Player();
        player.sprite.addTo(this.stage);
    }
});

game.createClass('Player', {
    init: function() {
        this.sprite = new game.Sprite('panda.png');
    }
});

});

We still need to add the sprite to the stage.

Now if you save your changes you should see your sprite on the left top corner.

Next download free Flying Dog game template to see how small game works in Panda 2.