The "Learn Pixi.js" book. TypeScript Port

[8Observer8 58]

This is an official link to original book examples: https://github.com/kittykatattack/learningPixi

I will public examples on:

• Playground. You will be able to see a code and a result. I use complication to  AMD modules (Asynchronous Module Definition) and the RequireJS library to load AMD modules
• GitHub Pages. I use compilation to CommonJS modules. I bundle JS files to bundle.min.js using Browserify and minify it to bundle.min.js using UglifyJS
• Source code on GitHub: will be later

I will NOT use Webpack, Gulp, Grunt and so on. I will public the instruction on GitHub how to build examples locally in the README.md file.

Note. Release version is loaded more quickly, but on playground you can see a code, you can make a fork, change the code and save it with new link.

1. Hello World: playground, release

2. Displaying the canvas: playground, release

3.  Sprite From Image: playground

[ivan.popelyshev 1071]

Thanks for trying to making my job easier. The more stuff we make, the easier it will be to answer all the newbie questions.

I'm also looking for the moment when i'll be able to integrate everything together - docs, wiki, hacks, examples, tutorials.

[d13 105]

Thanks for doing this!!! I also need to update the original tutorial for v.5, and make a few changes and improvements. 

[jonforum 90]

you also have a lot of video tutorial.
with some keyword and source youtube.
 

https://www.google.com/search?lr=&hl=fr&biw=1502&bih=750&tbs=srcf%3AH4sIAAAAAAAAANOuzC8tKU1K1UvOz1UrKc8sKUktArMzSnJzTNMTc1NTUsuKwSLJWUBubn4emJNYXl6eWJQCkQEqyizNBTMBuYgaTVAAAAA&tbm=vid&ei=DHyIXcaxA8ec_Qb0yrWoAQ&q="pixijs"&oq="pixijs"&gs_l=psy-ab.3...0.0.0.64091.0.0.0.0.0.0.0.0..0.0....0...1c..64.psy-ab..0.0.0....0.Nz8-mSaDSAA

 

 

[8Observer8 58]

3. Sprite From Image.

Playground

[8Observer8 58]

This is the first example from the book "Discover Phaser" in TypeScript and Phaser 3: Playground

 

[8Observer8 58]

I will publish on two Playgrounds: Plunker and CodeSandbox. If one is dead another will be available.

3. Sprite From Image: Plunker, CodeSandbox

[8Observer8 58]

Textured Rectangle in pure WebGL 1.0 and TypeScript. I use glMatrix for Linear Algebra.

Playground:

• Plunker: https://next.plnkr.co/edit/4pnm93F1eWQuvpYg?preview
• CodeSandbox: https://codesandbox.io/s/textured-rectangle-with-transforms-typescript-s7gfb

Source Code on GitHub (see a step-by-step instruction in the README.md file): https://github.com/8Observer8/textured-rect-with-transforms-webgl1-typescript

Edited October 19, 2019 by 8Observer8

[Dima 0]

On 9/23/2019 at 10:55 AM, d13 said:

Thanks for doing this!!! I also need to update the original tutorial for v.5, and make a few changes and improvements. 

@d13 Hi. When we can see this book?)

[d13 105]

I would love to do it! But just haven't had the time yet, unfortunately.

[James B. Gilbert 1]

On 10/13/2019 at 3:29 AM, 8Observer8 said:

This is the first example from the book "Discover Phaser" in TypeScript and Phaser 3: Playground

 

 

I first encountered animation in CSS and HTML. It was the most primitive and usual rotation of a square and a triangle and an exposure of half a second. But for more complex and unusual animations, of course, need JS. I want to start learning and practicing, but I don’t have enough free time yet as I'm preparing a term paper for college. And although the service that I found on Writing Judge helps me with this, time is still not enough. But I really hope to finish this soon and move on to learning much more interesting knowledge for me.

Edited December 30, 2020 by James B. Gilbert

[8Observer8 58]

10 hours ago, James B. Gilbert said:

Thanks for sharing this example. I'd like to get a complete example of the book

Thank you for good words. These books are nice too:

• Build your own 2D Game Engine and Create Great Web Games Using HTML5, JavaScript, and WebGL
• WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL)

I moved all examples from the second book to JSFiddle:

Chapter 02. Your First Step with WebGL
ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/
ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/
ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/
ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/
ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/

Chapter 03. Drawing and Transforming Triangles
ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/
ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/
ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/
ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/
ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/
ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/
ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/
ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/
ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/
ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/
ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/

Chapter 04. More Transformations and Basic Animation
ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/
ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/
ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/
ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/
ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/
ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/

Chapter 05. Using Colors and Texture Images
ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/
ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/
ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/
ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/
ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/
ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/
ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/
ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/
ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/

Chapter 07. Toward the 3D World
ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/
ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/
ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/
ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/
ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/
ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/
ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/
ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/
ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/
ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/
ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/
ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/
ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/
ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/
ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/
ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/

Chapter 08. Lighting Objects
ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/
ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/
ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/
ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/
ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/
ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/
ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/
ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/
ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/
ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/

Chapter 09. Hierarchical Objects
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/

Chapter 10. Advanced Techniques
ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/
ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/
ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/
ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/
ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/
ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/
ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/
ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/
ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/
ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/
ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/
ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/
ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/
ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/
ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/
ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/
ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/

Gifts
gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/
gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/
gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/
gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/
gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/
gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/
gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/
appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/

Appendix
appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/
appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/

Edited December 16, 2020 by 8Observer8