 Okay. So today I'll be discussing a few things about some method techniques that you should probably use while making games on the web. And probably before I get formally started with the discussion, will be brief discussion mainly around HTML5 and the things around it. So I have some probably, you know, initially starting point questions for you. So how many of you are JavaScript geeks? So one and a half, half hands, not even a full hand. Okay. Casual JavaScript programmers. Okay. So form, validate, return, false. So everybody does that. Okay. All those who raised partial hands with JavaScript, a very basic question. Is JavaScript object oriented or object based? Okay. So I'll just answer that question and leave it out to you to discover later on. JavaScript is an object oriented language. Probably I'll discuss offline why it is object oriented language. How many of you have worked with HTML5? Okay. Let me go back. I heard about HTML5 first one. So I think everybody should base that. Okay. Seen HTML5 in action. Okay. Design few hello words with HTML5. Okay. Less hands. Worked extensively with HTML5. Okay. So what all things have you done with HTML5? Most common one, I suppose. That's the most, you know, addictive part of HTML5. Okay. Okay. How many of you developed ever a computer game? So it can be simple shooter game. I hit you, you hit me. Okay. And out of that, how many of them, if at all, have been pure JavaScript games? Okay. So what games have you developed if you want to review it? That's okay. I don't know. I mean, you can keep that secret if you want. So let me show you one game. It's definitely not made by me. Okay. This all pure HTML5. I'm pretty sure a lot of you would have, I don't know how many of you are addicted to this game. I play this a lot quite often. Okay. This is pure HTML5 game. And there are a lot of things that, okay. So there are a lot of things that would come into picture now when we start designing games using HTML5. So HTML5 brings a lot of crazy stuff. Probably some of the things that we would be focusing on, at least I would be focusing on would be looking at the canvas element that is, that allows you to do something more like MS Paint or Gimp and gives you a lot of capabilities similar to that. You have this new audio and video capabilities that allow you to natively play the videos and the audios within the browser. Of course, browsers should support the corresponding codecs. A very powerful thing that has come up is local storage. You had heard about Google Gears. Use that. Yeah. So a lot of things were standardized based upon the needs that had come up. And you have now a local storage and we'll see what it allows us and what are the restrictions and constraints on that. We have a very powerful history API that has come up in HTML5 and we'll see how we can use that effectively mainly for the purpose of navigation as far as your gaming is concerned. And then you have a very interesting concept of offline wherein you can force the HTML5 compliant browsers to cache some of the contents on the client side and very useful when you specially design your games for the mobile devices wherein you're not sure about the connectivity. You know, in the morning we had some hiccups in the demo because the BSNL network connection was not good here. So similarly, the guys who are on mobile, they may be travel, they may be in transit and you do not expect. I mean, the guy may be, you know, in let's say check-in queue and he may be playing a game. And as he enters the plane, there are no network connection, but he would still like to continue the game. He may not be able to submit the scores to the server, but would like to continue the game, playing the games. So can we do that? And that may require moving from one page to another. So you may have to move from A.html to B.html. Can you force the browsers to work even in that offline mode? So will some of those interesting capabilities? Okay. While working with the word effective, now what is the first thing that comes to your mind? So I'll make it in a session very interactive rather than me just giving you some lectures or preaching or something. So when I say, you know, you have to make this application effective, what does it mean? These are some effective techniques. So UI, okay? Performance. Performing is sub-cush dub-bem and Aaliyah egg dub-bem. It is a big black box called performance. Okay. Flow. Okay. It serves the purpose very critically. Should do what is supposed to do. Okay. So I'll probably divide this development parameters on the word effective in two broad categories. One would be user centric. So the end user who's, you know, using that application, using that game. And second is the application or game centric. So what I'll think that the developer will have to keep in mind a technical guy. So from a user perspective, you have this usability, whatever it means to the user. So usability means, may mean using effective use of the keyboards, the mouse. You may want to have what else I say, support for accessibility and other things. You want a fluid interface. A fluid interface means the response should not be intermittent. It should be as continuous as possible. So you should, user should not feel a disruption in whatever he's doing. The application should naturally be very responsive. So as soon as I, you know, click on the button, it should show me some effect. So even it may take three seconds to connect to the server and get my response back. But during those three seconds, it should show me that something is happening. So I should get a feel that the application is working. And, you know, what I call as it may, you may want to have some smart capability. So one of the smart capabilities is, you may want to keep some of the data on the client's side. So that when the user locks in again or visits that page again. So instead of you having to decipher via cookies and other things, you just get to the local storage, pick up the old data and start playing the game and continue from where he has left. So the good part of that is you really don't have to worry about quote unquote, what do you call a session management. So even if there are no cookies, if there are no sessions, you can still make the anonymous user continue with where he left. Then you have from the application perspective or from the game perspective, you would like to worry about somebody's performance. So I'll probably break down performance into various parameters. You have to worry about probably the memory usage on the client side. I mean, obviously when you work on mobile devices, you don't want to overboat the application with a lot of memory hacks. In fact, I have an iPad and believe me, I have said that I am never going to use the default browser Chrome on that. The moment you open three or four windows, I know it's going to hog 150 MB of RAM. If I start playing Angry Birds along with that, it's going to reboot my machine at some point in time. So you have to ensure that whatever applications you create, you have to profile with the kind of browsers that you deploy in the kind of operating system that you have. So it's a lot of work that you have to do in there. Although you have got libraries, say jQuery, and a lot of bunch of libraries, JavaScript libraries are available, but then not every library may be suitable for every browser and every mobile, every device that is there. You have to worry about the speed, the speed of execution. You do not take too many CPU cycles on the client side. You also have to worry about the bandwidth. And periodically, when you work in a social environment, when you have a multiplayer game played on the web using HTML5, so not something like Farmville, which is not really a multiplayer game, and not like Cafeville. So you have Texas Holder, you have to play poker online. How many people play poker? So you've got some poker faces. So that's some bit of multiplayer game because that happens in real time. So you may want to redesign that in HTML5 and then you may have to worry about the pushes from the server or you may want to periodically pull to the server. So there are various techniques that are available. So what I'll do is I'll just start with some of the key elements of HTML5. Yes, the reason is it is what the application has to decide in terms. So it does not affect the user experience per se, size of the data. What it affects is it may impact the speed, it may impact the, what I'll say, the memory that is there, and it may indirectly impact the user experience. No, I'm looking at the data what I'm looking at is, so there are, I mean, you raised a very good point. So two parts of data that is there. So one is the data that you transfer periodically from the server to the client. So I'll put it in the bandwidth and the data requirements there. Then you have the data requirements on the client side. Now if you use old browser, so you do not have newer browser plugins for Google, so if you design for older browsers and you work with those techniques. So Flash also provides you some bit of storage, which is pretty effective. The only thing is that will not work on iPad or iPhone devices because there's no Flash. So if you work with Flash, you have got some capabilities, you have got some restrictions and you're confined to some data storage over there. Similarly, if your browser is HTML compliant, now all the data storage definitely takes space on the client side. However, if you are looking for any of, you know, HTML5 based browsers or henceforth the devices that are there, they are pretty good in terms of memory that they have, and not only in terms of RAM, but also in terms of the storage space that they have. So probably the minimum storage that you will have on any of these devices is about 8 GB. And the browser will generally can go up to like 500, 600 MB of its own cache, which may include your local storage as well. So I'll start with the basic stuff, Canvas, that's probably the most exciting part of HTML5 and that's what most of you would be using. So some of the key features of, yes, so you, okay, the question is, you know, the constraints around memory, so you cannot ignore the memory which is taken up by your application, but the point is what will be a good amount of memory to be kept in RAM, and what will be a good amount of memory that you can offload it maybe to a local persistence or maybe to somewhere offload? You can. So that's what we will look at. That's what we'll explore. So say, for example, if you are playing some games and you go from level one to level two to level three, now if the user is not connected to the net and you have loaded all the five levels on the client side, so what you may want to do is you may want to not load everything into memory, have it somewhere in the cache, somewhere persistent and then as it may need it, you load it up. So you can do those things. Okay. So Canvas allows you to draw almost anything that you can think about as far as, as long as it is 2D and using some transformation techniques, you can create some 3D effects, you know, something like rotations and zooming and zoom out things. So some of the out of the box things that are available is you can draw shapes, you can copy and image and draw onto your Canvas. You can take a snapshot from a video at a given time and you can again draw it on the Canvas. You can do some transformations. You can do scaling and so on. And then there is a very beautiful thing called save and restore. So that's mainly for technical reasons. Probably we'll explore some of the things. Now when you want to, I mean, the guys who are very new to probably just a primer for them. When you work with Canvas, the thing that you would be doing generally is you would, you know, draw borders, draw shapes and so on. And then you will, what are known as draw paths technically. And then when you want to say that I have done drawing with the path, you will either do a just a stroke, that means draw just a border, or you would do a fill and a stroke. So fill will draw it with some, the fill color and then draw a border around it. So once you say stroke, your one path is complete. And then you can continue with the next parts. So I mean, those are some of the technical things that are there. So you can, of course, draw shapes and things. And finally you will draw this fill and stroke. Now when you play games, you probably need to do this periodically. So you have this function called set interval that probably you will be using very frequently to draw that periodically. The moment you do that, there is a pressure on your CPU cycles because something has to be done periodically. And if it's a large image, and if you draw the entire thing again, it's going to take a lot of time and a lot of CPU cycles. So let's start with some, yeah. Okay. So a lot of things will depend upon what kind of game it is. So there is no general rule that I can say whether you have to draw the complete entire screen or entire frame or you just have to draw a portion of it. So if I, you know, probably just go back to this game. You know, if you look at this game, the entire part is static except for the cell cubes that are there. And probably the cell cube which is currently under consideration is something which probably just needs to be redrawn. So you can use things which are very specific to your application. So if I look at this part, I really don't have to redraw the entire, you know, background hexagon. Yes, in this case, yes. Yeah. So what, okay. I'll do one thing. I'll just draw some shapes around the canvas and I'll give you an idea of how things are drawn or probably redrawn and then you can get a feel of it. So what we'll do is we'll just draw a simple rectangle. We'll draw, you know, copy an image and we'll try to take a snapshot of the video and we'll see what interesting things we can do by just a permutation combination of these three things. So what I've done is, if I look at the UI, so I have a simple image. So that shows up and then I've created a canvas. Now just a word of caution, the guys who get started with canvas, you know, when you work with HTML, you are used to working with heights and widths in putting in the styles, the CCC styles. Now with canvas, do not forget to put it in the styles and also as the attributes height equals and width equals. Both the things will be mandatory. I mean for the guys who are starting with canvas. And what I'll do is I'll just draw a rectangle within this canvas. So now this canvas has a height of 320 and a width of, sorry, width of 320 and the height of 240 pixels. I'll show you the code. So when I draw a rectangle, I've given some x, y coordinates and I've given some path around it. So the code corresponding to it for drawing a rectangle would be one to get hold of the, what I'll say, the element reference itself. Then we get hold of what is known as a context. Now as of now there are three contexts which are prevalent. So the most common one which is supported across the browsers is 2D that allows you to draw 2D applications. Then you have another specification which is coming. You guys have worked with OpenGL or heard about OpenGL? So there is a web implementation of that coming up what is known as WebGL. And again it's available in two parts, experimental and the final one. GL experimental is supported only on Chrome right now. Although Firefox 4 supports it but then there are a few constrained along with it. So the portable context that you have access to is context 2D. So you say I'm going to create a path and this path is actually a rectangle and this is just that path that I have to create. Now I've defined this path, fill it with whatever is the default color and maybe draw a border. So it creates right now a black rectangle. So at 0, 0 and whatever is the width and the height. So at 10, 10 the width is 50 and the height is 50. So it gives me a rectangle like this. And if I do not say fill what it will give me is just this border. So now what you can do is depending upon what your application is and where your updates are required you can just update that specific part. So like if I look at this game out here so you may just need to continually update only this section here. No there will be only one canvas element. So let me, okay, so I'll draw an image. So what I've done is I've copied this image onto it. Now if I want to update only this portion I just need to draw a rectangle on it. No, no. So what happens is unless you clear the entire stuff so there is a method called clear rect. So that will take it to the background. I mean that will clear the entire area. So unless you do that it's like you have drawn something on MS Paint and on top of it you draw something more. So only that portion is something that will be affected. So as I said a lot of things depend upon your game. So if it is like you know a shooter game or something then you may have to recreate the entire part. If it is let's say a game like Scribble or something even though it's multiplayer you may have to just redraw the rectangles wherein the letters have been put. So you may not need to redraw the entire board. Yes. So similar to the method drawRect you have a method called clearRect. So you can clear that rectangle and redraw on that part. No there is no layering in the canvas. So there are no layers supported. So whatever is there it's just flattened. Yeah. So there is as I said so objects you will get when you have multiple layers. Right. So once you have drawn a rectangle it's gone. You just are left with canvas once again. So everything is a flattened image. If you have to remove a something you will have to clear that entire area and draw the background whatever you have to draw. We'll do that part. So animation requires that you probably have to draw it periodically. So there is no animation in drawing. Animation is achieved only by drawing it various times with a different output. Again depends upon where you want to do an animation. Then at least so what okay so if you have to draw this portion from here to here and you want to keep the entire image as is then in that case you will have to redraw complete part. Okay the reason is because what happens is as you move you cannot you know you cannot say undo what you have done earlier. Right. Because there is no concept of multiple layers of object. So once you have drawn it's just one item. So as you want to move you will have to take it back to the previous color. But you do not know what is the previous color so you'll have to redraw that entire image. Yeah. That's the reason. You cannot. Okay. Yeah. So you cannot fix something in the canvas in the sense that I want to say I will do something and undo something that's not possible. So if you want to do that you may want to keep some state in your own. I mean if you want to do a partial rendering. So at times you will have to do a trade-off against speed and memory. So if you want to keep multiple chunks in memory you will have probably better performance and speed but then it will have an impact on memory. Yeah. Yeah. So you brought a very you know good technique which is used by a lot of you know designers and game developers. So what do you raise the question is can you have nested canvas the answer is no but what you can do is you can have a canvas on top of another canvas. So what will happen is the canvas which is at the back gives you the background and the canvas which is on the top then you can draw a rectangle. You can move only. So in that case you don't have to redraw the entire part in the second canvas. So now let me look at how you can just simply copy an image. So the context that we get handled to from the canvas element it has a method called draw image. So draw image the first parameter can take a reference to another canvas. So you can canvas a copy contents of one canvas to another and that is how you can very beautifully create something like you know a graphic editor on the web. So you have one canvas on top of the other canvas as one of you mentioned. So this the canvas in the background contains the final image. The canvas on the front contains what is he currently drawing. So that will capture all the mouse events. So whatever mouse events are done you draw on the second canvas which is which has a higher z index. So he can see all the effects over there. Once he says commit you copy this onto the previous image. So whatever is the previous canvas plus this will be copied onto it. So you get x plus y and henceforth you can then probably create a complete jump on the web itself. Yes so draw image actually takes up to eight parameters. The first four parameters defines the origin and the dimensions of the source and the next force define the origin and the dimensions of the destination. So you can say I want this part from the original put it this part so it may be scaled up scale down zoomed in zoomed out all that is possible. So the first parameter can refer to another canvas element. It can refer to another image element also. So what I've got is this image element. So let me just refresh this part. So as I draw an image it takes this image element and draws it entirely completely over here. So now let me do something with the video. Okay I need to just some content of the video. Before that let me just draw something interesting. So the context allows me to get the entire pixel data. If I want to manipulate each pixel by pixel. So you have this method called get image data and so I've taken the entire canvas which is drawn. I get this array. So array is x into y into 3. In fact into 4. ARGB coordinates. So alpha, red, green and blue. So what I'm doing is I'm just inverting the color. So red becomes 255 minus red, green becomes red. It allows me to create a negative of that image. So if I have an image, if I click on this becomes a negative for that image. If I click it once again it gives me the original image once again. So if you want to manipulate each pixel by pixel in an image you can do this. The only constraint is when you say put image data it is the entire structure which is kept at. So these many pixels starting with origin 0 comma 0 draw it. If there are more pixels than that those will be clipped off. If there are less pixels then background or whatever is the original image that will be remained as is. Now let me take up the video part. So this is a very simple just 10 seconds or maybe 5 seconds animation. So what I'll do is I'll take a snapshot of this video and draw it onto the canvas and then we'll see some techniques that we'll use and how effectively we can use to create some really wonderful stuff. So if I click on this. So I've done exactly the same method. Okay which is just one second. So if I look at the video part I've done exactly same instead of image I've taken the video. So video is you know more powerful element which is available in HTML5. It allows you to I mean take a complete control over the video that you want to play. You can play pause, rewind, you can jump to a specific time if you know the total duration of it. So the draw image we have I've told you that I can work with another canvas. We have seen we can work with another image and here we can work with another video. So now if I do this periodically I can see probably the video right on the canvas itself. So how about doing this in the method set interval. So let me do that periodically. So if I create a method called you know capture this video periodically all I need to do is call this method let's say after 50 milliseconds. So the moment I do this I will just come to this. I will just come to this. Okay now when you render a video you do not have too much control over how it gets rendered. So for example you may have you know some video and there may be some targets that you may have to hit. Now those things cannot be done on top of a video. So now let's do something even more interesting. What I'll do is as far as this video is concerned. I'll just hide this video. Display none simple gone. So it looks like that the audio video is playing over there because the video also has an audio it continues to play in the background. So it's like you are watching a movie there but it's actually not a movie that you are watching over there. Okay now this is a canvas you have complete control over what you want to draw on top of it. Yeah yeah so this is happening so set time out it's like a new thread in JavaScript right and it continues to do that periodically at 350 milliseconds. So it's something like user is watching a video over there but it's actually not watching a video you are re-drendering it again. So that video is being played over there that nobody sees and you are showing him that it's something like it's being played over there. Okay so if I do a rectangle now it will come but it will go because the entire thing is being re-drawn. You can see that. So what you can do is if you have a game which probably has some videos and it's probably some target that somebody has to hit. So immediately after you draw this if I say for example immediately after I draw this video immediately after I draw this video if I say draw a rectangle. So you see that rectangle permanently over there because immediately after drawing it you're drawing a rectangle on top of it. Yes. So but the good part is it gives you a complete video effect so video is already designed and you have probably a game or some animation or something more on top of it. You have some question? No. How can you have a canvas? What do you mean by moving on the video? Okay you want to draw this entire video capture at different locations is what you know. Okay so you want this rectangle to be animated. So all you need to do is probably define some coordinates. So let me do one thing. I'll just define some coordinates just once again. Now this is okay. So I'm using it in drawing the rectangle. No. Okay this is not the coordinates, this is the dimensions width and height. So because it's running at 50 frames per second so you see a lot of effecting over there. So you can draw this so now you know you can draw a video and whatever games on top of it. So video can be designed by your graphic animators and things like that and you can focus on your game cucks. So I think I'll take a pause at this canvas part. Yeah you'll have to be louder you're sitting and it's raining. Okay generally the rendering of the image is pretty fast if you have let's say an image which is in a 1024 by 768. So some of the matrix that I've got it generally takes about you know 75 to 100 milliseconds to render the entire part. I mean in the extreme case when you have a lot of things up and running. So generally it will take about 5 to 10 milliseconds to render it. Okay so when you say draw image what happens is it takes up the entire image whatever the pixelates of that. You know it knows what is the x and y coordinates and the width and height that you are supposed to do. That you have taken up for drawing. It may be required to do some computation because the width and the height of the target may be different. So that transformation it may have to do. It may you may get a final image but may be skewed if the dimensions are not same. And it will just copy you know bit by bit copy of whatever is there. And if you notice here it actually does not do a copy from the screen. It does a copy from the memory because the video is not visible but still you can see the animation of the video. So you can have lot of images probably loaded in the background and then you can start copying them onto canvas depending upon what is to be shown. So again once the video is paused it stopped. Okay yes so I mean it's a very standard you know said interval clear interval process. What right now the video plays in loop but video has events like it has started it is paused and it is stopped. So you can handle that event and you can clear the interval. Video has events. Stamel 5 video has events. Video loaded. Video started. Video paused. Video started. So again continued and then video stopped. And of course you have an error loading error. Okay see what I would recommend is to stick to canvas for multiple reasons except maybe in enterprises where a lot of the companies have not is still upgraded from I6. Most of the consumers if you're targeting you know in playing games and not the enterprise guys they would have the browsers which would support at least canvas if not everything. No no no that's what I'm saying if you're not targeting them so I6 does not support you know canvas so barring that you know audience everything everybody else would have now these browsers which would support canvas. Flash the problem is iPhone is gone. Entire iPhone market is gone. Right IOS market is gone. If you work with SVG you still have different implementations of SVG and the bad part about SVG is you cannot have all this stuff. You cannot copy it from an image and take this. You cannot so you'll have to do a lot of lot more hard work in SVG is compared to canvas. In fact the specs of canvas have been derived after taking the experience of SVG and other things. Yes yes so as I said there is there is absolutely no way if I look at the raw UI, raw API wherein you get a reference to a rectangle or an image or anything that you have drawn. In our application that we use at our you know in our company we have created some games and we have created our own what I'll say API wherein we keep track of objects so you can do and undo and redo because we keep a track of what you have drawn so you'll have to do that. So JavaScript gaming engines do have support of some objects but then manage manipulation of those and management of those and re-rendering of those it's all up to you. So you can create the so you have a beautiful library called vector 3d. Okay so you can use that to create some 3d effect it has those translate zoom and zoom out things and you can use that. Okay so I'll just quickly go through and just you know probably running out of time. I'll just quickly browse through some of the items. So local storage in the Stimul 5 you've got a new object called local storage so you can say window.local storage and you have got a whole bunch of functions. So local storage is a simple key value pair. So key is a simple string and object can be any of your JSON object. So it will be persisted locally in the cache in the db of the browser and you have an event called on storage. So you can get to know whether the item was added item was removed you get to know the key the value that was added or removed or replaced and maybe a URL at which the value was added or removed. Now there are constraints to while you think this local storage. One all browsers invariably in fact across the browsers you have a constant limit of 5mb storage. So you cannot go beyond 5mb and the sad part is you cannot request beyond 5mb. So 5mb is the maximum local storage space that you have as of today across all the browsers. So if I look at this spec it was a recommendation that was given by W3C and all browsers took it as a standard part. No per domain. So xyz.com all the pages everything combined together you got 5mb. So opera has that. Okay I am not aware of any of the browser that gives you that prompt. Yes yes here yeah yeah. So there is yeah that's index db or web SQL I think that they use SQL db or one of these two browsers I think Parasharama is taking a session on the next db. The next thing that you have very interesting is history object. How many of you guys use jithub? Okay start using jithub if you do whatever. So if I look at this page it has got some URL. Now just look at the effect and the UI that you get. If I click on this RES you see the animation. If I look at the URL it shows me slash RES. If I click on let's say drawable httpi the URL changes. By the way it is not going to another page it is pure Ajax calls. Okay but the URL is also being updated there is no hash that you know working with GWT and all those things you work with. So this is your history API. Let's see what this has to offer and how you can use it in your gaming technique. So you have window. History available. You have got methods that you can push the state and pop the state. So it takes three parameters. The object that you are pushing it to the state that you may want to use it later on. Title of the browser that you would like to see on the top and the URL. Please note that the browser will not fetch the contents of the URL. No it is just the URL that you will see in the location in your address bar. It is your responsibility to make an Ajax call, get a request, do animation, whatever you're supposed to do and do the render. So what it thinks that you can do is you can if you have a multi-level game go from level 1 to level 2 to level 3. So right now initially the user may be in slash game 1 slash 1. So once he's done he clicks using Ajax you update the UI, push into the history whatever data you have to push and you say the URL is now slash game 1 slash 2. So URL will be updated. So the good part is now the user can bookmark that also. So once he goes to slash 2 he can directly go to level 2. So that is how you can use this history object to your best. Yes, yes, yes it will be updated in browser history. So if you say push state it is like his location.href equals. If you say replace state it's like location.replace. So if you say replace state the current URL will go and the next URL will come into the history. All relative URLs allowed. So you cannot go even across the domain also. Only relative URLs allowed. Then you have this offline cache. So now we have seen local storage that can be your JavaScript specific cache. But what if your JavaScript itself is not loaded? You cannot work with local storage. So this is very interesting that has come up in HTML5. All you have to do is in your HTML element you say manifest equals and you provide the name of the file. So the name of this file is something that will contain a list of files that has to be cached by the browser and has to be kept. So the contents of the file will all as the first line has to be cached is paced manifest and subsequent lines have to be file 1, file 2.js, file 3.jpg, file 4.ovp, you know mp4, 5.3.jpg or whatever it is. You just have a simple list of files. What the browsers are supposed to do in fact all the browser that supports this manifest. So Firefox 4 supports it, Chrome supports it, Safari supports it. What they will do is whatever is the manifest file even if these files are never used in the current HTML what has been loaded they will in the background fetch all those files, keep them in the local storage till the time that page is open. So now if you want so if the user has moved from the check-in line and has boarded the plane and he does not have network connections and he has to go to level 2, you know that level 2 files will always be available because you have put them in the manifest cache. So you can use a lot of these combination of whatever this HTML5 objects that are available to create your you know games very effectively. Okay what will happen is the moment it goes offline you know there is no network connectivity it will pull the items from the cache. The moment it gets the connectivity once again it will just do you know head request to the server and will check the time stamp or ETag or whatever it is. If it has changed it will do. So that's how the browsers behave but there may be a scenario that the files have been cached. The network connection is always on but things have changed. In that case you won't be able to do unless you periodically check and probably refresh the page once again. All, all. The idea is these are the minimum set of files that you will require to run your game or application even in the offline mode. So you may not show a video initially but as you move you may show a video after five minutes. So you need that video to be cached. There is no good practice or bad practice it very much depends upon what are the capabilities that you want to provide in an offline mode. So you say that okay you will go up to only from level one to next two levels. So you cache only that data and then as once you reach level three you say no network connection found. Press submit, save it in local storage whatever his score is and when you get the connection push it to the server and go to the next level. No, no, no. Only that HTML5 no what else a recursive content around it. No, no, no content inside it. Yeah session management on the client side. Yeah, see normally how do you manage the sessions if you look at the server side session management the clients will generally be sent out a cookie right and the client is expected to send back the same cookie back to the server. Now using this local storage what you can do is you can store the state on the client side. You can use local storage dot set item dot set item and once you load the application you say get item if that item exists. You know that he had come earlier and this is the state of that application loaded from that state rather than getting it from the server. That's how you can do. Okay Edugin is a company that we do a lot of corporate training and professional services. We've just launched another offshoot of this in college learning. So where we do a lot of game-based learnings and so right now it's in private betas we're tying up with content providers. So in November and you'll be seeing a lot of stuff on Facebook. So I think probably everybody is waiting for tea right now. There's a next session so he will beat me so he can disperse and we'll take it offline. Thank you everybody.