Presentation is loading. Please wait.

Presentation is loading. Please wait.

Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 5 Examples 1.

Published bySabina Rodgers Modified over 8 years ago

Similar presentations

Presentation on theme: "Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 5 Examples 1."— Presentation transcript:

1 Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 5 Examples 1 and 2 Textures, Sprites, and Fonts

2 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 2 This Chapter What is textures, why textures How to map and control Addressing efficiency: loading and memory Faking animation with textures Displaying fonts (text) with textures This is our text solution

3 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 3 Texture Mapping A Texture: Fancy word for “an image” Texture Mapping: Fancy word for pasting an “image” on a geometry Texel: pixels of a texture WARNING: for WebGL (and many hardware) Texture resolution must be of powers of 2 E.g., 16 x 32, or 2 x 512, or 512x512 1023x1025: is a BAD resolution for WebGL

4 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 4 Why Texture Mapping Represent “objects” Cheap, easy, with high quality Typically: specifically drawn by artists Ease of control/manipulate We know how to control a geometry Control of “objects” can be simply modifying the corresponding transform (Renderable!)

5 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 5 Texture Mapping Considerations Texture external to the engine: Loading must occur When to load, what happens when done? Textures with Transparency The Alpha channel File format: jpg and png Memory concerns (lots of textures) Size of image file (texture) Sharing of the same texture

6 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 6 A Word about “Transparency” or Alpha Color = [R, G, B, A] (e.g., [1, 0, 0, 1] for red) A: the Alpha Channel Typically for Alpha Blending Colors C1 = [R1, G1, B1, A1], C2 = [R2, G2, B2, A2] Blending the colors: Result = C1 * A1 + C2 * (1 – A1)  This is the default WebGL blending Or Result = C1 * (1 – A1) + C2 * A1

7 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 7 How to texture map? Map: from one coordinate system to another! Texture Coordinate System (UV Coordinate) Just as NDC and WC, independent of pixel (or texel resolution) Constant range 0 < U < 1 0 < V < 1 Always cover the entire texture

8 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 8 Texture mapping: Associate UV positions with corresponding geometric positions Define UV values at vertices in Model Space!! Communicate this association to the WebGL Mapping UV to the Model

9 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 9 5.1: TextureShader Project

10 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 10 5.1: Goals define uv coordinates for geometries with WebGL create a texture coordinate buffer in WebGL build GLSL shaders to render the textured geometry define the texture engine component to load and process an image into a texture and to unload a texture implement simple texture tinting, a modification of all texels with a programmer-specified color

11 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 11 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

12 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 12 Review: SimpleShader and GLSL Shaders Attribute: aSquareVertexPosition Per vertex change Fed via gl.ARRAY_BUFFER uniform: transforms and pixelColor Per render update Stay constant for all vertices SimpleShader: Interfaces JavaScript to GLSL variables Renderable: Supports our clients to work with SimpleShader

13 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 13 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

14 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 14 TextureVS (Vertex Shader) varying: changes per pixel Feeds into Fragment Shader aTextureCoordinate: from Engine_VertexBuffer (later)

15 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 15 TextureFS (Fragment Shader): Variables Note the varying (vTexCoord) Same name as in TextureVS! sampler2D datatype!

16 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 16 TextureFS (Fragment Shader): code Note the texture2D() GLSL function Using of vTexCoord! (s, t): interpolated (u, v) What does r compute?

17 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 17 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

18 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 18 VertexBuffer support for UV Coordinate Engine_VertexBuffer.js

19 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 19 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

20 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 20 TextureShader A SimpleShader (access to all instance var) With new attribute reference mShaderTextureCoordAttribute to aTextureCoordinate

21 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 21 TextureShader::activateShader() Send square vertex positions SimpleShader::activateShader() In addition: binds and connects texture coordinates Binds gl.ARRAY_BUFFER to mShaderTextureCoordAttribute To Engine_VertexBuffer::mTexCoordBuffer (getGLTexCoordRef())

22 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 22 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

23 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 23 gEngine_DefaultResources: Enable sharing Engine_DefaultResources.js

24 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 24 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

25 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 25 TextureRenderable: Controllable game objects A Renderable object with reference to TextureShader and A loaded texture map

26 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 26 TextureRenderable: draw() Textures.activateTexture(): [to come] Activates and connects uSampler in TextureFS to current texture image Renderable.draw(): SimpleShader::activateShader() Connects and loads square vertex TextureShader::activateShader() Connects and loads UV coordinate TextureFS.glsl Renderable.js

27 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 27 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

28 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 28 Engine Texture component TextureInfo object: for ResourceMap Engine_Textures.js

29 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 29 Engine_Texture::loadTexture() Work with ResourceMap like previous async loads calls _processLoadedImage() when ready

30 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 30 Engine_Texture::_processLoadedImage() Ship loaded image from CPU to GPU Create TextureInfo object for ResrouceMap to keep track (textureID)

31 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 31 Engine_Texture::activateTexture() ResourceMap:: stores TextureInfo!! Binds textureInfo.mGLTexID to uSampler in TextureFS.glsl Texture Wrapping and Filtering

32 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 32 Engine configuration changes Canvas: opaque Blending support in TextureFS.glsl! C1*A + C2*(1 – A) Texture Map y increases upwards Engine_Core.js

33 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 33 Testing Texture map … Define and load textures

34 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 34 Creating texture objects (TextureRenderable) Color’s Alpha values Remember the “r” In TextureFS? Texture tinting TextureFS.glsl

35 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 35 Drawing/Updating with texture Draw as before Update tint … C[3] is alpha

36 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 36 Texture Implementation overview GLSL Shaders: TextureVS.glsl + TextureFS.glsl Support UV coordinate at vertex positions Engine_VertexBuffer.js: Define UV buffer to load into WebGL TextureShader.js: Allow programmer access to the GLSL Shaders Engine_DefaultResources: New instance of sharable TextureShader object TextureRenderable.js: Allows multiple textureShader objects to be drawn (at different locations) Engine_Textures.js: Allows loading of texture files

37 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 37 Learning from Example 5.1 Texture Mapping: UV to texel mapping Associate vertex positions and UV coordinates Implement: create and associate a second buffer in WebGL Images are loaded as textures into WebGL ResoruceMap reference to TextureInfo (defined in Engine_Textures.js) CPU only has a textureID GPU stores the actual texture Binds TextureID to uSampler in TextureFS Engine_Textures::activateTexture()

38 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 38 Image File, State, and WebGL

39 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 39 Sprite Sheets: Collection of object images 2 n x 2 m can be overly restrictive E.g, 260x130: stored in 512x256! Optimize load time Loading many 16x16 images vs Loading single 128x128 image Organization: all objects in a level A single 1Kx1K file 50 files of 128x128

40 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 40 Sprite Sheet: Artists create, communicate to developers

41 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 41 Drawing with Sprite Sheets Figure out pixel positions of an object Portal as example Receive info from artists Compute UV values of the object Recall 0 to 1 covers the entire image Map UV values to vertex positions

42 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 42 5.2: Sprite Shaders Project

43 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 43 5.2 Goals: gain understanding for texture coordinate (UV) experience defining sub-regions within an image for texture mapping draw squares by mapping from sprite sheet elements prepare for working with sprite animation and bitmap fonts

44 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 44 Recall: TextureShader … Engine_VertexBuffer:: getGLTexCoordRef() Refers to a static WebGL Buffer Defined once, shared by all TextureShaders! UV values in the buffer are bounds of UV space and cannot be changed! Need per-shader Texture coordinate UV buffer for Sprite support Engine_VertexBuffer.js

45 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 45 SpriteShader: A TextureShader which defines its own Texture Coordinate Buffer!

46 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 46 SpriteShader Defines and loads a Dynamic texture coordinate buffer!

47 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 47 SpriteShader: custumn texture coordinate Set texture coordinate (into WebGL)! bufferSubData(): pushes array to WebGL! Draw with its own texture coordinate buffer Call to SimpleShader::activateShader (not TextureShader!)

48 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 48 SpriteRenderable: A TextureRenderable which remembers UV values for each vertices (instead of the default UV bounds) DefualtResources: creates a default SpriteShader

49 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 49 SpriteRenderable: UV to WebGL format

50 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 50 SpriteRenderable: UV setting functions In UV In pixel values (must convert to UV) Notice: image resolution from ResourceMap (TextureInfo)

51 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 51 SpriteRenderable: draw Calls SpriteShader::setTextureCooridnate() Loads UV to WebGL! SpriteShader.js SpriteRenderable.js

52 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 52 Testing SpriteRenderable Same TextureMap!! TextureMap is shared SpriteShader is shared Unique SpriteRenderables!

53 Ch 5: Textures, Sprites, and FontsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 53 Changing UV in Update

Download ppt "Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 5 Examples 1."

Similar presentations

GlTF and rest3d Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2013.

GlTF and rest3d Patrick Cozzi University of Pennsylvania CIS Fall 2013.
Graphics Pipeline.

Graphics Pipeline.
Texture Mapping. Texturing  process that modifies the appearance of each point on a surface using an image or function  any aspect of appearance can.

Texture Mapping. Texturing  process that modifies the appearance of each point on a surface using an image or function  any aspect of appearance can.
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Introduction to Computer Graphics Ed Angel Professor of Computer Science, Electrical and.

1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Introduction to Computer Graphics Ed Angel Professor of Computer Science, Electrical and.
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Chapter 12: Making the Applications Interesting.

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Chapter 12: Making the Applications Interesting.
The programmable pipeline Lecture 10 Slide Courtesy to Dr. Suresh Venkatasubramanian.

The programmable pipeline Lecture 10 Slide Courtesy to Dr. Suresh Venkatasubramanian.
Sprite Batching and Texture Atlases Randy Gaul. Overview Batches Sending data to GPU Texture atlases Premultiplied alpha Note: Discussion on slides is.

Sprite Batching and Texture Atlases Randy Gaul. Overview Batches Sending data to GPU Texture atlases Premultiplied alpha Note: Discussion on slides is.
GPU Graphics Processing Unit. Graphics Pipeline Scene Transformations Lighting & Shading ViewingTransformations Rasterization GPUs evolved as hardware.

GPU Graphics Processing Unit. Graphics Pipeline Scene Transformations Lighting & Shading ViewingTransformations Rasterization GPUs evolved as hardware.
University of Texas at Austin CS 378 – Game Technology Don Fussell CS 378: Computer Game Technology Beyond Meshes Spring 2012.

University of Texas at Austin CS 378 – Game Technology Don Fussell CS 378: Computer Game Technology Beyond Meshes Spring 2012.
Basic Graphics Concepts Day One CSCI 440. Terminology object - the thing being modeled image - view of object(s) on the screen frame buffer - memory that.

Basic Graphics Concepts Day One CSCI 440. Terminology object - the thing being modeled image - view of object(s) on the screen frame buffer - memory that.
CS 480/680 Computer Graphics Course Overview Dr. Frederick C Harris, Jr. Fall 2012.

CS 480/680 Computer Graphics Course Overview Dr. Frederick C Harris, Jr. Fall 2012.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Geometric Objects and Transformations. Coordinate systems rial.html.

Geometric Objects and Transformations. Coordinate systems rial.html.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Computer Graphics Texture Mapping

Computer Graphics Texture Mapping
CS 418: Interactive Computer Graphics Introduction to WebGL: HelloTriangle.html Eric Shaffer.

CS 418: Interactive Computer Graphics Introduction to WebGL: HelloTriangle.html Eric Shaffer.
09/09/03CS679 - Fall 2003 - Copyright Univ. of Wisconsin Last Time Event management Lag Group assignment has happened, like it or not.

09/09/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Event management Lag Group assignment has happened, like it or not.
Cg Programming Mapping Computational Concepts to GPUs.

Cg Programming Mapping Computational Concepts to GPUs.
WebGL: in-browser 3D graphics Nick Whitelegg Maritme and Technology Faculty Southampton Solent University.

WebGL: in-browser 3D graphics Nick Whitelegg Maritme and Technology Faculty Southampton Solent University.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images Starting Out with Games & Graphics in.

Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images Starting Out with Games & Graphics in.

Similar presentations

Ads by Google