8Observer8 Posted September 13, 2019 Share Posted September 13, 2019 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. Hello World: playground, release Displaying the canvas: playground, release Sprite From Image: playground ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 13, 2019 Share Posted September 13, 2019 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. 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
d13 Posted September 23, 2019 Share Posted September 23, 2019 Thanks for doing this!!! I also need to update the original tutorial for v.5, and make a few changes and improvements. 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
jonforum Posted September 23, 2019 Share Posted September 23, 2019 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 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 3. Sprite From Image.Playground Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 13, 2019 Author Share Posted October 13, 2019 This is the first example from the book "Discover Phaser" in TypeScript and Phaser 3: Playground Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 13, 2019 Author Share Posted October 13, 2019 I will publish on two Playgrounds: Plunker and CodeSandbox. If one is dead another will be available. 3. Sprite From Image: Plunker, CodeSandbox Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 19, 2019 Author Share Posted October 19, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Dima Posted December 12, 2019 Share Posted December 12, 2019 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?) Quote Link to comment Share on other sites More sharing options...
d13 Posted December 13, 2019 Share Posted December 13, 2019 I would love to do it! But just haven't had the time yet, unfortunately. Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted December 16, 2020 Author Share Posted December 16, 2020 (edited) 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 ivan.popelyshev and jonforum 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.