Example: Asset Management

In this example, we'll cover the foundational steps of setting up a scene and integrating assets in Beast2D. Initially, we select essential assets for our scene, including a background image and a cursor image, and load them using the provided function. Then, we create our first scene, "MyFirstScene," and add it to the default canvas. To enhance the scene, we set a background image and customize the cursor appearance to align with our game's aesthetic.

With the scene and assets prepared, we execute the scene, allowing it to display on the canvas. To maintain smooth execution and update the game environment seamlessly, we implement a global update function. This function ensures that the screen is cleared with a black color, updates the canvas to reflect any changes or interactions, and sets the update cycle to repeat, ensuring continuous gameplay.

We also highlight the importance of the canvas.event_system.loader.actions mechanism in Beast2D for executing specific actions upon asset loading completion. Within this context, we utilize the loader action to set the cursor image for the canvas once all assets are successfully loaded.

Through this example, developers gain insight into scene creation, asset integration, and runtime management in Beast2D, providing a solid foundation for further game development endeavors.

DOWNLOAD EXAMPLE 
    
 
      //### EXAMPLE: BASIC ASSET MANAGEMENT ###
      //lets selects some assets for scene
      images=["bg.jpg","cursor.png"]
      //set the directory to the assets
      var assetDirectory="imgs/"
      //lets load the image asset
      init_assets();
      //create first scene  and add it to the default canvas. 
      var myScene=scene("MyFirstScene",canvas)
      
      //now lets  background image to the scene
      var myBackground=myScene.addBg(imageSet["bg.jpg"],"image")
      
      //set the cursor for the canvas when assets are loaded
      canvas.event_system.loader.actions.push(
              function(){
                      canvas.cursor.setImage(imageSet["cursor.png"])
              }
      )
      //
      //lets run the scene
      myScene.run();
      // global update function 
      function update() { 
              // Clear screen with black color
              clear("black");
              // Update the canvas object
              canvas.update();
              // Set the update to repeat
              setTimeout(update, canvas.timeout); 
      } 
      update();
Live view