 So I am going to talk about game brochure today. So game brochure is a framework that has been built in JavaScript. So it's actually a game framework. You can actually build games where you write code in JavaScript and then the game runs on mobile devices, family, Android and iOS. So one of the founders that has to be made games, we've been primarily focused on Facebook. Now we are actually targeting mobile. We've been working on JavaScript from the beginning. So we did web-based games and then Facebook games and now we are doing mobile games. So we are actually working on JavaScript and with a little bit of service. That's about it. So JavaScript is very popular these days. So if the popularity kind of started with Ajax, then a lot of client-side frameworks became very popular and they made JavaScript more popular because of that and then Node came and then JavaScript became popular on the server side. And game brochure, they write all the popularity and then they help you make games with JavaScript. They do it there. And the aim with this talk is that I'll run you through the introduction. It's just an introduction to game brochure. So you'll be able to understand what provides how helpful it is and maybe you'll also find useful and maybe make it game-only. A little bit of background. Game brochure is a company that started two years back. They were funded. They were a close meet-up for two years. Now they made open source last temporary. They're actually in the news for Hawaii. So there's Zingar and Facebook wanted to buy them. They turned on their office. It's a game framework. It's open source. It's free. It's based on Mozilla Public License. You write code and you can actually build games for Android and iOS with literally no change. And you write code in JavaScript. So why is it good? So you write code in JavaScript. Obviously it's awesome. And then you write games as a bit HTML5 source. You write, you think of it as writing HTML5 games. But finally it'll work on the mobile. You'll have the native performance that you get on mobile. And it's almost right on my native. So you actually build it once. You can run it on Android or iOS for no. I think with little modifications even for the web. And they also have very good tools to make you make the development process very simple. So these are tools that they have. I'll run you through the tools. I'll also show demo soon after this slide. So native inspector, so the way they work is the whole development can actually be done on the browser. And you don't have to go to the device to while doing development. So that is your primary goal. So they cut down the development time a lot. So for that they have very good tools. One is a native inspector. So native inspector is a tool where you can actually inspect the scene graph. The scene graph is the elements that are placed on the screen that are visible on the screen again. And it will allow you to inspect them, see which views are visible, which text views are visible. And it will help you debug. So that is one tool that they provide. It's built on Chrome itself. And you can use the regular Chrome tools. So for example, if you want to debug performance, you can do that. So you can use the inbuilt profile that Chrome has and then debug your code. And you can also use the regular JavaScript debugging because it's an entire JavaScript. So you can use the regular JavaScript debugging tools. The other thing that they provide is remote debugging. So you connect your device and then you connect to the machine. And then using Chrome inspector, you can actually debug the machine remotely, half remotely. It's something called test app functionality. So there are cases where you actually want to test it on the device, but the cycle is actually very slow. So you compile it and then put it on the device and then you make changes. And again, if you want to make something else, then you have to redo the cycle. It's called test app functionality where you make modifications and then it is visible immediately. So the way they do it is a server runs on the machine and the phone connects to the server. So a node server runs. It's an express-based server. And they connect to the server and then get the code and so that's how they achieve that. And they also allow you to test with different resolutions and devices. The tools that they have, they are privately built on Node.js and for compiling, we use C++, Java for Android devices. So most of them are open source tools. So the tool is actually called Basel. The installation instructions are actually on the website. So to create a new project, you just have to put the basis in it. So this actually creates a project. For the project it's created, you actually want to run a server to serve the device. And usually the server runs on port 9200. So this is a hello world app which is created. If you click on simulate, so once you click on simulate, you can actually see what is happening. So it's talking about tools that Game Pressure provides. So one thing I was mentioning was the UI instructor. So it just brings up elements that are visible on the screen at that point in time. So there's a text you can actually click on the text you have. You did the properties here. So for example, if you want to change the font, you can actually change the font in real time and then make the scene changes well under. Then I talked here about different resolutions. So we actually built a game on top of this. So I think I'm ready to demo that. So there's a game that you built. So this is actually an iPhone. Now you can actually choose a device and click on 95, for example. It's reducing the size. You get the idea. So you can actually see how it looks on different devices. So if you want to look on Android, for example, you can do that. So one of the things that you actually want to do is develop it for different devices because the screen sizes and resolutions vary a lot. You want to take care of that. So once you take care of that, there are mechanisms to do that. And once you take care of that, you don't actually want to see the results immediately. And this helps you do that. You can actually use the regular Chrome debugging tools. So to access the JavaScript, you can actually change to this iFrame. This will add a iFrame which will access the JavaScript which is in the page. So these are global variables. So you can see gc.abereaser. This is like a user object that we have within our game. So you can see, you can inspect it, you can change it, you can run both. So this will actually give you all the views that are present on the screen right now. A little bit of the UI inspector. For example, I pick the logo. I want to change the position immediately to all the elements I can do that on the screen. So this is all on JavaScript. And once you want to build it on the device, you just turn on the command, it creates a binary and then you deploy it on the device. So it sure wants to know how it works. So they have a JavaScript SDK so that exposes some APIs to create element views inside in your code. So you can create text view, button view, those kind of views. And there's a game brochure API that they use internally that acts as a bridge between the JavaScript interpreter and the JavaScript SDK. So the way the game brochure works is so they have built in the JavaScript interpreter as part of the game. So in iOS, it is Spider Monkey and in Android, it's V8. So that's how your game runs. And then they convert those parts to the native code. So that's how they work as a whole. These are actually the elements, but this is like the architecture of the whole stack. So the JavaScript interpreter, it can either be Spider Monkey or V8 based on which you're running on. And then they have native code. It's a wrapper for all the common platform elements that are present for different devices. And then you have other things for iOS, that's iOS prefixed off and for Android, that's Android prefixed off. One last thing. So if you actually want to extend, so you're doing everything JavaScript, but there are cases where you actually want to write native code because function is not present immediately. So for that, they have built-in plugins. They have plug-in matches. You can actually build plugins and then extend the functionality. For example, in-app purchases. If you want to have analytics or Facebook, you can even write your own custom code.