-
Notifications
You must be signed in to change notification settings - Fork 2
Initialization
If you're just getting started there are two ways to try out FRB JS. The easiest way is to use the following page which lets you edit and see FRB JS running with no local setup required. To do this, go to the following link:
http://joelmartinez.github.io/flatredball-js/
If instead you'd like to run this locally (and build something which you can upload to your own server), then the rest of this page will help you out.
To run FRB JS locally you will need a HTTP server. In this tutorial we'll set up a HTTP server using Python. This means that you will need to install Python on your machine if you don't already have it. You can get it here:
https://www.python.org/download
Next we'll set up all the files that you need for the project. You'll want to make a folder somewhere on your machine. I'm using Windows for this tutorial, so things will be a little different on other operating systems.
1. Create a folder on your machine to hold your project. For example, I'll use C:\FlatRedBallProjects\Test\FrbJs. I'll refer to this folder as root.
2. Create an html file and name it index.html in root
3. Modify the html page so it has the following contents:
<HTML>
<HEAD>
<TITLE>My Game</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/frb.js"></script>
</head>
<BODY>
<canvas id="thegame" width="1024" height="768"></canvas>
<script>
var game = frb.start({
canvas:document.getElementById("thegame"),
init: function (engine) {
var radius = 50;
var circle = engine.SpriteManager.addCircle(radius);
},
update: function() {
// your game's logic goes here
}
});
window.game = game;
</script>
</body>
</html>
4. Notice that we're referencing frb.js and jquery in the Scripts folder. You'll need to create a Scripts folder inside root. At this point you should have a Scripts folder and index.html.
5. Download jquery into the Scripts folder from http://jquery.com/download/. This documentation was written against jquery-1.11.1.min.js. If you download a different version then be sure to modify index.html to reference a different file name.
6. Download frb.js from this (github) page into the Scripts folder. The Scripts folder should contain jquery and frb.js
7. Download frb-thread.js and save it into root. Notice that this file should not be put in Scripts".
Your folder structure should look like:
- <root></root>
- frb-thread.js
- index.html
- Scripts (folder)
- frb.js
- jquery-1.11.1.min.js (This may differ depending on the version you are working with)
To run the HTTP Server:
- Open a command line
- Navigate to the root folder
- Write the following: python -m SimpleHTTPServer 8000.
- Open the following in a browser: http://localhost:8000/