excalibur Documentation

Size: px

Start display at page:

Download "excalibur Documentation"

Angelica Malone
5 years ago
Views:

1 excalibur Documentation Release Erik Onarheim, Josh Edeen, Kamran Ayub Aug 12, 2017

3 User Documentation 1 Installing Excalibur.js Getting Excalibur Unstable Builds Example Project Templates Referencing Excalibur Standalone Referencing Excalibur via Triple-Slash Reference Referencing Excalibur as a Module Getting Started Download and Install Excalibur Build Your Game Script Hello Excalibur: Building Breakout! Features 13 4 Installation Getting Started API Documentation Support Samples Contributing License Indices and tables 17 i

4 ii

5 Excalibur is a simple, free game engine written in TypeScript for making 2D games in HTML5 canvas. Our goal with Excalibur is to make it incredibly simple to create and write 2D HTML/JS games aimed at folks new to game development all the way up to more experienced game developers. We take care of all the boilerplate engine code, cross-platform targeting, and more so you don t have to. Use as much or as little as you need! Excalibur is an open source project licensed under the 2-clause BSD license (this means you can use it in commercial projects!). It s free and always will be. We welcome any feedback or contributions! If you make something with Excalbur, please let us know so we can feature you in our online gallery. User Documentation 1

6 2 User Documentation

7 CHAPTER 1 Installing Excalibur.js Getting Excalibur There are several ways you can download Excalibur. npm (Best for TypeScript projects): npm install excalibur Nuget: Install-Package Excalibur Yeoman Generator You can use the Excalibur Yeoman generator to spin up a blank, ready-to-go Excalibur game: # Install Yeoman globally npm install -g yo # Install the Excalibur generator globally npm install # Create the folder you want your game to be in mkdir my-game # Go into the folder cd my-game # Run the excalibur generator The Yeoman generator will automatically create the appropriate package.json and bower.json files and install the needed dependencies for your project. Raw Script Files You can also download the raw Javascript files from the Excalibur Distribution repository. 3

8 Note: Remember, Excalibur is a client-side library and cannot be used in a server-side Node.js project. Unstable Builds If you want to live on the edge and get unstable builds, you can add the Excalibur Appveyor Nuget feed to your project, see unstable. Example Project Templates The excaliburjs organization on GitHub has several example projects: TypeScript, Angular2 & SystemJS TypeScript & Webpack TypeScript & Browserify Universal Windows Platform (UWP) Apache Cordova Xamarin Forms Electron These examples allow you to simply clone and start building your game! Referencing Excalibur Standalone Just include the excalibur.min.js file on your page and you ll be set. <!DOCTYPE html> <html lang="en"> <head> </head> <body> <script src="excalibur.min.js"></script> </body> </html> Referencing Excalibur via Triple-Slash Reference For a simple TypeScript-based game, using triple-slash references works great. It requires no extra module system or loaders. /// <reference path="node_modules/excalibur/dist/excalibur.d.ts" /> var game = new ex.engine({... }); 4 Chapter 1. Installing Excalibur.js

9 Make sure the path is relative to the current TS file. You only need to include the reference on your entrypoint file. Then simply include excalibur.min.js as mentioned above in your HTML page. You can also reference Excalibur through the tsconfig.json. { } "compileroptions": { "target": "es5", "outfile": "game.js", "types": ["excalibur"] } Referencing Excalibur as a Module Excalibur is built using the AMD module system. The standalone files excalibur.js or excalibur.min.js use the UMD module syntax at runtime to support CommonJS (Node-like), AMD, and a global browser fallback. It is auto-loaded into the ex global namespace. These are the recommended files to use for production deployments. You can optionally use excalibur.amd.js and excalibur.amd.d.ts to load Excalibur using an AMDcompatible loader (such as jspm). Note that this method is harder to reference via TypeScript. To get started, first install Excalibur through npm (TypeScript typings are best supported in npm): npm install excalibur -D In a TypeScript project, you can reference Excalibur with the ES6 import style syntax: // Excalibur is loaded into the ex global namespace import * as ex from 'excalibur' At runtime, you should still include excalibur.min.js standalone. In a module loader system, such as SystemJS, you must mark excalibur as an external module. An example SystemJS configuration: System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // excalibur in an npm module 'excalibur': 'npm:excalibur/dist/excalibur.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultextension: 'js' } }); 1.6. Referencing Excalibur as a Module 5

10 6 Chapter 1. Installing Excalibur.js

11 CHAPTER 2 Getting Started Download and Install Excalibur Review the Installing Excalibur.js for instructions. Build Your Game Script Create a script in your project, here I ve named it game.js. Excalibur games are built off of the ex.engine container. It is important to start the engine once you are done building your game. Note: ProTip Call game.start() right away so you don t forget // game.js // Create an instance of the engine. // I'm specifying that the game be 800 pixels wide by 600 pixels tall. // If no dimensions are specified the game will be fullscreen. var game = new ex.engine({ width: 800, height: 600 }); // todo build awesome game here // Start the engine to begin the game. game.start(); Include your game script after the excalibur script. <html> <head> </head> 7

12 <body>  <script src="excalibur-version.js"></script> <script src="game.js"></script> </body> </html>... Open a browser and view the blank blue screen of goodness. Hello Excalibur: Building Breakout! That s cool, but let s make something more interesting on the screen. To do this Excalibur uses a primitive called an Actor, and places actors into a Scene. Think of actors like you would the actors in a play. Actors are the primary way to draw things to the screen. Note: ProTip Actors must be added to a scene to be drawn or updated! game.add(actor) Will add an actor to the current scene. Note: Important! Actors have a default anchor of (0.5, 0.5) which means their position is centered (not top-left) by default. // game.js // Create an instance of the engine. var game = new ex.engine({ width: 800, height: 600 }); // Create an actor with x position of 150px, // y position of 40px from the bottom of the screen, // width of 200px, height and a height of 20px var paddle = new ex.actor(150, game.getdrawheight() - 40, 200, 20); // Let's give it some color with one of the predefined // color constants paddle.color = ex.color.chartreuse; // Make sure the paddle can partipate in collisions, by default excalibur actors do not collide paddle.collisiontype = ex.collisiontype.fixed; // `game.add` is the same as calling // `game.currentscene.add` game.add(paddle); // Start the engine to begin the game. game.start(); 8 Chapter 2. Getting Started

13 Open up your favorite browser and you should see something like this: That s neat, but this game is way more fun if things move around. Let s make the paddle follow the mouse around in the x direction. // Add a mouse move listener game.input.pointers.primary.on('move', function (evt) { paddle.pos.x = evt.x; }); What s breakout without the ball? To make the ball bounce, Excalibur comes prebuilt with an elastic collision type that does naive elastic collisions, which is sufficient for breakout. // Create a ball var ball = new ex.actor(100, 300, 20, 20); // Set the color ball.color = ex.color.red; // Set the velocity in pixels per second ball.vel.setto(100, 100); // Set the collision Type to elastic ball.collisiontype = ex.collisiontype.elastic; // Add the ball to the current scene 2.3. Hello Excalibur: Building Breakout! 9

14 game.add(ball); The ball will now bounce off of the paddle, but does not bounce with the side of the screen. To fix that, let s take advantage of the update event. // Wire up to the update event ball.on('update', function () { // If the ball collides with the left side // of the screen reverse the x velocity if (this.pos.x < (this.getwidth() / 2)) { this.vel.x *= -1; } }); // If the ball collides with the right side // of the screen reverse the x velocity if (this.pos.x + (this.getwidth() / 2) > game.getdrawwidth()) { this.vel.x *= -1; } // If the ball collides with the top // of the screen reverse the y velocity if (this.pos.y < (this.getheight() / 2)) { this.vel.y *= -1; } Don t like square balls? Neither do we. You can create your own custom drawing function like so: // Draw is passed a rendering context and a delta in milliseconds since the last frame ball.draw = function (ctx, delta) { // Optionally call original 'base' method // ex.actor.prototype.draw.call(this, ctx, delta) } // Custom draw code ctx.fillstyle = this.color.tostring(); ctx.beginpath(); ctx.arc(this.pos.x, this.pos.y, 10, 0, Math.PI * 2); ctx.closepath(); ctx.fill(); Note: ProTip Overriding a method like this will remove any built-in Excalibur functionality. If you would like to call the original draw for example ex.actor.prototype.draw.call(this, ctx, delta) Breakout needs some bricks to break. To do this we calculate our brick layout and add them to the current scene. // Build Bricks // Padding between bricks var padding = 20; // px var xoffset = 65; // x-offset var yoffset = 20; // y-offset var columns = 5; var rows = 3; var brickcolor = [ex.color.violet, ex.color.orange, ex.color.yellow]; 10 Chapter 2. Getting Started

15 // Individual brick width with padding factored in var brickwidth = game.getdrawwidth() / columns - padding - padding/columns; // px var brickheight = 30; // px var bricks = []; for (var j = 0; j < rows; j++) { for (var i = 0; i < columns; i++) { bricks.push(new ex.actor(xoffset + i * (brickwidth + padding) + padding, yoffset + j * (brickheight + padding) + padding, brickwidth, brickheight, brickcolor[j % brickcolor.length])); } } bricks.foreach(function (brick) { // Make sure that bricks can participate in collisions brick.collisiontype = ex.collisiontype.active; }); // Add the brick to the current scene to be drawn game.add(brick); When the ball collides with bricks, we want to remove them from the scene. // On collision remove the brick ball.on('collision', function (ev) { if (bricks.indexof(ev.other) > -1) { // kill removes an actor from the current scene // therefore it will no longer be drawn or updated ev.other.kill(); } }); Finally, if the ball leaves the screen, the player loses! ball.on('exitviewport', function(){ alert('you lose!'); }); 2.3. Hello Excalibur: Building Breakout! 11

16 Congratulations! You have just created your first game in Excalibur! Please review the documentation for more examples and an API Reference. 12 Chapter 2. Getting Started

17 CHAPTER 3 Features We are still pre-1.0 but Excalibur has many powerful features built-in already that make it simple to build and design your games: Built with TypeScript first Fully-documented API Works in all major browsers (Chrome, Firefox, IE11) and most mobile browsers (Android Chrome, Apple Safari) HTML Canvas-based rendering engine Full Web Audio support and fallback HTML5 audio support Full HTML5 Gamepad API support Full keyboard, mouse, and touch support using a unified Pointers API Support for basic collisions Support for rigid body physics system < html> _ Cross-platform support using Electron or Apache Cordova Simple update/draw pattern to keep logic and drawing separated Simple Actor model with Scenes, Actions API, cameras, and more Preloader API supporting resources like images, sounds, video, and generic resources Basic primitives like sprites, spritesheets, animations, and textures Sprite effects, particle emitters and post processor support Support for tile-based maps (with Tiled support) Logging API for debugging Promises-based async API Math API with Vectors, Rays, Lines, Projections, and more 13

18 and much more! 14 Chapter 3. Features

19 CHAPTER 4 Installation Follow our Installing Excalibur.js guide. Getting Started Follow our Getting Started guide. API Documentation The master branch API documentation is always available and up-to-date on our Edge documentation site. Otherwise, see the TOC on the left to find the stable API documentation. Support Ask us anything in the Excalibur.js mailing list. If you find a bug, report it on the GitHub issues page. Samples Compiled examples can be found in the Excalibur Samples. Contributing Please view the Contributing guidelines. If you spot a bug, have a question, or want to contribute, please open a GitHub issue! 15

20 License Excalibur is open source and operates under the 2 clause BSD license: Copyright (c) 2014, Erik Onarheim All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS AS IS AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PUR- POSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBU- TORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUB- STITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUP- TION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. The views and conclusions contained in the software and documentation are those of the authors and should not be interpreted as representing official policies, either expressed or implied, of the FreeBSD Project. 16 Chapter 4. Installation

21 CHAPTER 5 Indices and tables genindex modindex search 17

Explaining & Accessing the SPDX License List

Explaining & Accessing the SPDX License List SOFTWARE PACKAGE DATA EXCHANGE Gary O Neall Source Auditor Inc. Jilayne Lovejoy ARM August, 2014 Copyright Linux Foundation 2014 1 The SPDX License List 2 The