Almost Native Graphics Layer Engine (ANGLE), 136 Angry Birds Game, 9
Total Page:16
File Type:pdf, Size:1020Kb
Index pre-production, 18–19 A processing.js Almost Native Graphics Layer Engine audio, 28 (ANGLE), 136 basic processing syntax, 26 Angry Birds game, 9, 11, 64, 93 embedding a sketch, 26 Animation engine game developers, 24 bike game, 197 images, loading and importing, 29 clearInterval()method, 202 in-line processing, 27 CycleBlob, 197 JavaScript intergration, 27–28 main() function, 201 JavaScript version, 23 mesh pre-processing stage, 198 jQuery score list, 29 pre-processing, 199 lite version, 24 requestAnimationFrame()method, 202–204 web designers, 24 setInterval(func,timeout), 202 production, 19–20 setTimeout()method, 201–202 puzzle game, 16 speed and measurements, 199 reception, 20–21 steps, 197 risk vs. reward, 23 timing, 200–201 screenshot action, 16 toV vector, 198 simplicity rule, 21 Artistic track screenshot, 65 skill vs. chance, 23 A to B game strengths, 25 18 levels, 17 weaknesses, 25 brainstorming phase, 18 Audio Data API (Mozilla), 6 design background, 16 development stages, 19 Infinite Loop, screenshot, 17 B influence and inspiration, 17–18 Basic game planning inspiration to execution, 23 code modification, 163 post-production and release, 20 collision detection, 162, 172 257 INDEX Basic game planning (continued) E dart drawing. (see Dart drawing) Embedded OpenType (EOT), 254 dartboard image textured, 167 dartboard variables and buffer initialization, 162 F drawDartboard function, 167 Fire game, 162 demo action, 120 input, 162 emitter implementation, 121 models, 162 fade out, 124 mouse events, 170–172 forces implementation, 122 parameterized shader functions, main loop implementation, 122 164–165 rotation, 123–124 scene and dartboard,drawing, 166 texture scoring, 162, 172–173 creation, 120 shader uniform and attributes, 165 individual flame, 121 texture, loading and initializing, 163 loading, 121 vertex and fragment shader, 164 Fish game Bejeweled game, 9, 10 explodeFish(…)function, 103 makeExplosion(…)function, 103 C makeFish(…) function, 101 new fish making, 97–99 Cascading Style Sheets (CSS), 36 properties, 102 attribute, style, 36 recycling, 102 cursor, 40 removeFish(…) function, 103 descriptive stylesheet language, 36 render, 100–101 domain, 36 sound, 103 selector and declarations, 36 touch or mouse-over a fish, 103 transforms, 39 touchstart and mouseover events, 101 transitions, 38–39 update, 99 user interface, 39–40 web fonts, 37 Client databases, 252–253 G CycleBlob. See Web-based Graphics Library Game (WebGL) Angry Birds, 9, 11, 64, 93 Artistic track screenshot, 65 D Doodle Jump, 64 Minecraft, 64 Dart drawing World of Warcraft, 64 dart buffer, 168–170 GLSL function drawDart(), 170 C-style language, 142 3D CSS tutorial cut/copy shader, 141 container properties, 95–96 fragment shader, 142 default touch/mouse behavior, 105 simplified graphics pipeline, 141 events and game loop timer, 96 vertex shader, 142 fish. (see Fish game) Graphics Processing Unit (GPU), 133 game variables and loop, 95, 97 parallax layer system, 104 particles, 104 H, I puffer fish, background layers, and Hello fireworks particles, 94 demo action, 115 Digital rights management (DRM), 3 emitter implementation, 117 Document object model (DOM), 5 forces, 117–118 Doodle Jump game, 64 hello world, 115 258 INDEX life and death, 118–119 screenshot application, 62 main loop implementation, 116 screenshot,track, 62–63 rendering, 119–120 folder creation, 65–66 spark designing, 115–116 Minecraft game, 64 HTML markup Mozilla Firefox and Google Chrome, 177 brick type, buttons, 67 Multi-platform HTML5 games <canvas> element, 66 bootstrapping CSS stylesheet and rules, 68 <body>, 35 saved tracks, 67 <head>, 35 snippets, 66 structure, 34–35 steps, 67 chess game HyperText Markup Language (HTML), 33 specification, 45 styles, 45–46 CSS. (see Cascading Style Sheets (CSS)) J, K, L DOM vs. canvas–based game JavaScript same game gravity, 56, 58 bricks solutions comparison, 57 circle, 77 solutions comparison pure DOM, 57 clear button implement, 85 internationalization createBrickAt(column, row) method, code, 55 81–83 DOM tag, 55 currentButton, 83 JavaScript i18n basic code, 55 curve, 78 translations, 55 folder structure, 76 JavaScript implement rotation, 84–85 game controller, 43 initUI() function, 80 high-level dynamic language, 43 jQuery, 80 i18n basic code, 55 jQuery button, 82 logic jQuery’s attr() function, 82 chess game, 47 offsetX and layerX, 81 chessboard, 50 onGridClicked(), 80 control implemention, 49 preventDefault() method, 82 game class, 47 square and square brick, 76, 81 menu display, 50 triangle, 79 renderer class, 48 drawing loop scope and namespacing, 46–47 blank sheet, 71 storage class, 48 bricks, 72 markup language, 33 context.beginPath() method, 74 mobile framework context.strokeRect() function, 74 Android/Makefile, 54 context.translate command, 73 application source code, 53–54 draw the columns, 74 chess game configuration, 52 draw() function, 72 desktop instance and Makefile, 54 drawing the rows, 74 jQuery and Zepto, 51 grid, 73 PhoneGap build, 51 lineTo() and moveTo() method, 74 webapp builder, 52 pixel grid, 71 page transition effects, 41–43 screenshot, 75 stylesheet languages <script> tags, 72 advantages, 41 structure, 69–71 compass, 41 tags type, 34 M Multiplayer game, WebSockets Marble Run game bumper cars game design, 215 application, 61 game client 259 INDEX Multiplayer game, WebSockets (continued) SSE bumper.htm, 220 benefits, 251 client.js,global variables, 221 drawbacks, 251 DrawGame method, 223, 235 multi-line message, JSON enabled keyboard handlers, 234 transmission, 250 event handlers, 232 playerlogon message, 250 final game client, 236 sending data from a server, 251 game loop on window load, 222 server message, 250 handling keyboard input, 221 simple connection, 249 image preloading code, 221 single-line message, 249 KeysPressed variable, 221 subscribing message, 250 local client with some cars, 223 time-out to 5 seconds message, 250 message event handler, 234 streaming,traffic diagram, 249 MozWebSocket, 232 traffic diagram,long polling, 248 new global variables, 232 WebSocket offline game client, 224 benefits, 252 open event handler, 233 bi-directional communication SendGameState() method, 231 technology, 252 window load event handler, 232 connection technology, 252 game logic drawbacks, 252 collision detection implementation, protocol, 251 217–219 sending and receiving data, 251 game frame, 216 Node Package Manager (npm), 237 glancing collision and trajectories, 217 global properties, 216 momentum change, 217 O RunGameFrame, 216, 219 Open web game RunGameFrame(Cars) method, 216 Angry Birds, 9, 11 game server application cache,play offline game, 6–7 clinet connection, 226–227 Bejeweled, 9, 10 Game Loop,setup, 231 BrowserID, 8 global variables, 225 chrome and mozilla, 5 HandleClientClosure method, 228 CSS3, and JavaScript, 2 HandleClientMessage method, 228–229 distribution and monetization options HandleClientMessage outline, 228 Chrome Web store, 12 importing node.js modules, 225 Facebook, 13 JavaScript objects,generic method, 227 iOS App store, 13 JSON.stringify() and JSON.parse() Mozilla Labs apps project, 12 method, 228 DRM method, 3 node.js. server, 224 excellent documentation, 2 SendGameState method, 230 exremely low cost investment, 2 server.js, 225 fullscreen API gameplay, 7 WebSocket server, setup, 226 GamepadAPI, 8 WebSocket-Node, 224 HTML5 canvas and SVG,2D graphics, 4 netcode philosophy, 214 indexedDB, local storage, and other UNIX, 237–238 APIs, 6 windows, 237 large and friendly community, 2 music and sound, 5 quality, 4 N real-time multiplayer gameplay, 6 NeHe OpenGL tutorials, 177 requestAnimationFrame.JavaScript.method, 5 Network connection Rob Hawkes, 1 short polling,traffic diagram, 248 Robots Are People Too, 9, 11 260 INDEX Runfield, 9, 11 Q tame the mouse, 7, 8 Q*bert game, 175 TF2 WebGL, 12 Qix-like game, 175 uncompiled and open code, 3 up-to-date browser, 4 W3C, 3 R WebGL,3D graphics, 5 Rendering WebRT,OS application, 8 audio, 246–247 WHATWG, 3 canvas write once, use anywhere, 2 array of pixels, 243 basic support, 245 P benefits, 246 drawbacks, 246 PAC-MAN game, 175 Explorer Canvas, or excanvas, 246 Particle systems tag and JavaScript source code, 243–245 components SVG emitters and forces, 113 basic support and vector,graphics overview, 112 feature, 241 particles, 112–113 benefits, 242–243 renderer, 114 drawbacks, 243 system, 114–115 image source, 242 fire. (see Fire) image with gradient and primitives, 242 hello fireworks W3C, 241 demo ction, 115 XML-based language, 241 emitter implementation, 117 Rich Internet Application (RIA), 32 forces, 117–118 Rob Hawkes, 1 hello world, 115 Robots Are People Too, 9, 11 life and death, 118–119 Runfield, 9, 11 main loop implementation, 116 rendering, 119–120 spark designing, 115–116 S HTML5 canvas, 108 Same game gravity, 33 math Scalable vector graphics (SVG), 4 NaN operand, 110–111 basic support and vector,graphics feature, 241 random numbers, 111 benefits, 242–243 vectors, 108–110 drawbacks, 243 micro optimization image source, 242 chaining expressions, 130 image with gradient and primitives, 242 round numbers, 130 W3C, 241 optimization XML-based language, 241 flat array, 129 Scene view requestAnimationFrame, 129 model to world transform, 139 single-pixel particles, 128 projection transform, 140 typed arrays, 128 viewport, 140 optimized fireworks, 130–132 world to view transform, 139 smoke Scorched Earth game, 175 demo action, 125 Server-Sent Events (SSE), 249 emitter implementation, 125 benefits, 251 individual sprites, 125 drawbacks, 251 main loop implementation,