From 7f3e1ea6ef7d3b50548d07a866514d2d6cc1d8bb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 2 Dec 2023 10:05:00 +0000 Subject: [PATCH] deploy: 184d664aa4b576dbf539d9f6935f11be5543db8c --- 404.html | 4 ++-- assets/js/264aad2d.461df627.js | 1 - assets/js/264aad2d.74eabe9d.js | 1 + ...e~main.33f28e50.js => runtime~main.f535701b.js} | 2 +- blog/archive/index.html | 4 ++-- blog/index.html | 4 ++-- blog/tags/index.html | 4 ++-- blog/tags/scratch/index.html | 4 ++-- blog/tags/welcome/index.html | 4 ++-- blog/welcome/index.html | 4 ++-- docs/system_docs/BSP/Dynamic Objects/index.html | 4 ++-- docs/system_docs/BSP/Prims/index.html | 4 ++-- docs/system_docs/BSP/Tree Generation/index.html | 4 ++-- docs/system_docs/BSP/Tree Traversal/index.html | 4 ++-- docs/system_docs/Intro/index.html | 4 ++-- .../system_docs/Physics/BoundingSpheres/index.html | 4 ++-- .../system_docs/Physics/Collision Tests/index.html | 4 ++-- .../Physics/Rigid Body Physics/index.html | 4 ++-- docs/tags/index.html | 4 ++-- .../Modelling-with-blender/index.html | 14 +++++++++----- .../Adding Materials/index.html | 4 ++-- .../Create the Platforms/index.html | 4 ++-- .../Interactive Game Elements/index.html | 4 ++-- .../tutorials/Platformer Tutorial/Intro/index.html | 4 ++-- .../Platformer Tutorial/Moving Objects/index.html | 4 ++-- .../Platformer Tutorial/The Player/index.html | 4 ++-- docs/user_docs/Controllers/index.html | 4 ++-- docs/user_docs/GUI/index.html | 4 ++-- docs/user_docs/Interactions/index.html | 4 ++-- docs/user_docs/Intro/index.html | 4 ++-- docs/user_docs/Materials/index.html | 4 ++-- docs/user_docs/Modelling/index.html | 4 ++-- docs/user_docs/Settings/index.html | 4 ++-- docs/user_docs/Updating Objects/index.html | 4 ++-- index.html | 4 ++-- 35 files changed, 73 insertions(+), 69 deletions(-) delete mode 100644 assets/js/264aad2d.461df627.js create mode 100644 assets/js/264aad2d.74eabe9d.js rename assets/js/{runtime~main.33f28e50.js => runtime~main.f535701b.js} (98%) diff --git a/404.html b/404.html index 18087c7..329718f 100644 --- a/404.html +++ b/404.html @@ -6,13 +6,13 @@ Page Not Found | ChromeEngine Documentation - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/264aad2d.461df627.js b/assets/js/264aad2d.461df627.js deleted file mode 100644 index 06efe9f..0000000 --- a/assets/js/264aad2d.461df627.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkchrome_engine_docs=self.webpackChunkchrome_engine_docs||[]).push([[295],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>u});var o=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=o.createContext({}),c=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},m=function(e){var t=c(e.components);return o.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,s=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),p=c(n),h=i,u=p["".concat(s,".").concat(h)]||p[h]||d[h]||r;return n?o.createElement(u,a(a({ref:t},m),{},{components:n})):o.createElement(u,a({ref:t},m))}));function u(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,a=new Array(r);a[0]=h;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:i,a[1]=l;for(var c=2;c{n.r(t),n.d(t,{contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>s});var o=n(7462),i=(n(7294),n(3905));const r={},a="Modelling with Blender",l={unversionedId:"tutorials/Modelling with Blender/Modelling-with-blender",id:"tutorials/Modelling with Blender/Modelling-with-blender",isDocsHomePage:!1,title:"Modelling with Blender",description:"Whilst the built in tools for creating scene geometry are great, if you want to make bigger scenes it will be easier to make them first in a 3D modelling tool and then import them into the engine. One of the best 3D modelling tools out there is Blender, so here's quick tutorial on how to use it with Chrome Engine",source:"@site/docs/tutorials/02-Modelling with Blender/01-Modelling-with-blender.md",sourceDirName:"tutorials/02-Modelling with Blender",slug:"/tutorials/Modelling with Blender/Modelling-with-blender",permalink:"/ChromeEngine-Docs/docs/tutorials/Modelling with Blender/Modelling-with-blender",editUrl:"https://github.com/your-github-username/your-repo-name/edit/main/docs/docs/tutorials/02-Modelling with Blender/01-Modelling-with-blender.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{},sidebar:"tutorialsSidebar",previous:{title:"Interactive Game Elements",permalink:"/ChromeEngine-Docs/docs/tutorials/Platformer Tutorial/Interactive Game Elements"}},s=[{value:"Modelling your scene",id:"modelling-your-scene",children:[]},{value:"Blender to ChromeEngine coordinates",id:"blender-to-chromeengine-coordinates",children:[{value:"Preparing dynamic objects for ChromeEngine",id:"preparing-dynamic-objects-for-chromeengine",children:[]}]},{value:"Importing and exporting the mesh",id:"importing-and-exporting-the-mesh",children:[{value:"Exporting your mesh",id:"exporting-your-mesh",children:[]},{value:"Importing your mesh",id:"importing-your-mesh",children:[]},{value:"Moving the dynamic objects back",id:"moving-the-dynamic-objects-back",children:[]}]},{value:"Importing multiple meshes using obj file data input",id:"importing-multiple-meshes-using-obj-file-data-input",children:[]},{value:"Pre-compiling on Turbowarp and exporting with ExportScene",id:"pre-compiling-on-turbowarp-and-exporting-with-exportscene",children:[]},{value:"Materials",id:"materials",children:[{value:"Exporting an MTL file",id:"exporting-an-mtl-file",children:[]},{value:"Importing an MTL file",id:"importing-an-mtl-file",children:[]}]}],c=(m="ScratchBlocks",function(e){return console.warn("Component "+m+" was not imported, exported, or provided by MDXProvider as global scope"),(0,i.kt)("div",e)});var m;const p={toc:s},d="wrapper";function h(e){let{components:t,...r}=e;return(0,i.kt)(d,(0,o.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"modelling-with-blender"},"Modelling with Blender"),(0,i.kt)("p",null,"Whilst the built in tools for creating scene geometry are great, if you want to make bigger scenes it will be easier to make them first in a 3D modelling tool and then import them into the engine. One of the best 3D modelling tools out there is Blender, so here's quick tutorial on how to use it with Chrome Engine"),(0,i.kt)("h2",{id:"modelling-your-scene"},"Modelling your scene"),(0,i.kt)("p",null,"We're not going to cover how you make the scene as there are plenty of ",(0,i.kt)("a",{parentName:"p",href:"https://www.youtube.com/watch?v=nIoXOplUvAw"},"great Blender tutorials")," out there. We'll assume you have your scene ready to go. Here's an example scene from the ",(0,i.kt)("a",{parentName:"p",href:"/docs/tutorials/Platformer%20Tutorial/Intro"},"Platformer Tutorial"),":"),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Blender Screenshot of spikes and enemy",src:n(2779).Z,title:"Spikes and Enemies"})),(0,i.kt)("h2",{id:"blender-to-chromeengine-coordinates"},"Blender to ChromeEngine coordinates"),(0,i.kt)("p",null,"Whilst modelling details or setting positions you might want to specify specific coordinates. Unfortunately you can't get the coordinate of vertices yet in ChromeEngine however you can do this in Blender."),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Enter ",(0,i.kt)("inlineCode",{parentName:"li"},"Edit Mode")," and right click on a vertex"),(0,i.kt)("li",{parentName:"ol"},"press ",(0,i.kt)("inlineCode",{parentName:"li"},"N")," to open properties, and from there you can see the coordinates of the vertex.",(0,i.kt)("ol",{parentName:"li"},(0,i.kt)("li",{parentName:"ol"},"Tip: make sure to set to Global!"))),(0,i.kt)("li",{parentName:"ol"},"ChromeEngine and Blender use different coordinate systems but you can easily convert them by just swapping the y and z value. And multiplying the new z by negative 1.")),(0,i.kt)("h3",{id:"preparing-dynamic-objects-for-chromeengine"},"Preparing dynamic objects for ChromeEngine"),(0,i.kt)("p",null,"When you import your scene into ChromeEngine the transform origin of each object will always be the origin. This can be problematic, as when we try to transform these objects and their transform center lies at the origin instead of the center of the object, our transformations will be wrong."),(0,i.kt)("p",null,"To fix this we must reposition our dynamic objects so that their center of rotation is at the origin. We can do this like this:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Navigate to the ",(0,i.kt)("inlineCode",{parentName:"li"},"Object Properties")," tab in the ",(0,i.kt)("inlineCode",{parentName:"li"},"Properties")," panel."),(0,i.kt)("li",{parentName:"ol"},"Write down the current Location value, so that we can reposition back to this location later."),(0,i.kt)("li",{parentName:"ol"},"Set the Location to 0, 0, 0")),(0,i.kt)("p",null,"Here's what this looks like for the example scene from before:\n",(0,i.kt)("img",{alt:"Blender Screenshot of transform origin",src:n(4308).Z,title:"Set transform Origin"})),(0,i.kt)("h2",{id:"importing-and-exporting-the-mesh"},"Importing and exporting the mesh"),(0,i.kt)("h3",{id:"exporting-your-mesh"},"Exporting your mesh"),(0,i.kt)("p",null,"Once you've finished designing your game scene in Blender, export it as an .obj file."),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Select your objects."),(0,i.kt)("li",{parentName:"ol"},"Go to ",(0,i.kt)("inlineCode",{parentName:"li"},"File")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"Export")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"Wavefront (.obj)"),"."),(0,i.kt)("li",{parentName:"ol"},"In the export settings, make sure to disable exporting normals or UVs. ")),(0,i.kt)("h3",{id:"importing-your-mesh"},"Importing your mesh"),(0,i.kt)("p",null,"Now that you have your beautiful .obj file, let's bring it into your ChromeEngine game. To do this we can use the ",(0,i.kt)("inlineCode",{parentName:"p"},"import_from_OBJ_file")," block:"),(0,i.kt)(c,{mdxType:"ScratchBlocks"},"\nGameObjects.import_from_OBJ_file \\( CW orientated? <> scale [1] align_center <> .obj file data \\(leave blank if using _OBJ list\\) []\\) :: custom\n"),(0,i.kt)("p",null,"This block when placed within ",(0,i.kt)("inlineCode",{parentName:"p"},"Setup Scene objects")," will let you import a mesh as a ChromeEngine GameObject. It has the following inputs:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"CW orientated?"),' indicates whether your object has clockwise or anticlockwise orientated faces. If your model appears "inside-out" it\'s probably because this is set wrong'),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"scale")," - this is the size of the model on load. ChromeEngine uses BSP and expects all your vertices to be on a normalized scale between -1 to 1. If you find BSP messed up your mesh you should try changing the scale."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"align-centre")," - this will re-centre your mesh, which is helpful if you want to apply rotations to your object, or your mesh file isn't your own."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},".obj file data")," - used if you want to copy and paste obj file data into an input instead of setting the _OBJ file data.")),(0,i.kt)("p",null,"To import the file, assign the function to a variable, right-click on ",(0,i.kt)("inlineCode",{parentName:"p"},"_OBJ"),", select ",(0,i.kt)("inlineCode",{parentName:"p"},"import from file"),", and choose the .obj file you exported earlier."),(0,i.kt)("h3",{id:"moving-the-dynamic-objects-back"},"Moving the dynamic objects back"),(0,i.kt)("p",null,"Previously we moved all the dynamic objects to 0,0,0 so that their rotation centres would be the same as their local origins. However now we need to move them back. The recommended way to do this is to go to the ",(0,i.kt)("inlineCode",{parentName:"p"},"Logic")," sprite, and add to ",(0,i.kt)("inlineCode",{parentName:"p"},"GameObjects.setup()")," custom block a ",(0,i.kt)("inlineCode",{parentName:"p"},"setPosition")," block for each dynamic object, to set it's position back to what it used to be. Thankfully we made sure to write down all the old positions! Remember ChromeEngine and blender don't have the same coordinate system so you will need to convert the coordinates (reminder: we do this by swapping the y and z value. And multiplying the new z by negative 1). Here's an example of how to re-position a dynamic object back to it's old location:"),(0,i.kt)(c,{mdxType:"ScratchBlocks"},"\ndefine GameObjects.setup\\(\\):\n GameObject.setPosition \\( object name [Platform 3] position [0.6] [3.6] [-5.2] \\) :: custom\n"),(0,i.kt)("h2",{id:"importing-multiple-meshes-using-obj-file-data-input"},"Importing multiple meshes using ",(0,i.kt)("inlineCode",{parentName:"h2"},"obj file data")," input"),(0,i.kt)("p",null,"Importing our .obj file to ",(0,i.kt)("inlineCode",{parentName:"p"},"_OBJ")," and loading it once works fine if you have one single level but often your game will need to have many levels, so how would you do this? Thankfully ChromeEngine has you covered. Instead of importing your .obj file into the _OBJ list simply copy and paste it and put it in the optional ",(0,i.kt)("inlineCode",{parentName:"p"},".obj file data")," input in the ",(0,i.kt)("inlineCode",{parentName:"p"},"GameObjects.importFromOBJFile")," block!"),(0,i.kt)(c,{mdxType:"ScratchBlocks"},"\nGameObjects.importFromOBJFile \\( CW orientated? <> scale [1] align_center <> .obj file data \\( leave blank if using _OBJ list \\) [Copy and paste your .obj file here, instead of importing it to _OBJ]\\) :: custom\n"),(0,i.kt)("h2",{id:"pre-compiling-on-turbowarp-and-exporting-with-exportscene"},"Pre-compiling on Turbowarp and exporting with ",(0,i.kt)("inlineCode",{parentName:"h2"},"ExportScene")),(0,i.kt)("p",null,"If your mesh is very complex, the BSP tree generation will take forever on regular scratch so we recommend you use turbowarp to generate your BSP tree and then import it into ChromeEngine. To import an obj file along with a pregenerated bsp tree use ",(0,i.kt)("inlineCode",{parentName:"p"},"ExportScene")),(0,i.kt)(c,{mdxType:"ScratchBlocks"},"\n_OBJ = exportScene\\(\\) :: custom\n"),(0,i.kt)("p",null,'All you need to do is click the green flag and wait for your game to be "compiled" via ChromeEngine on turbowarp, then click on the ',(0,i.kt)("inlineCode",{parentName:"p"},"ExportScene"),", and your new custom ChromeEngine .obj file will be stored in the ",(0,i.kt)("inlineCode",{parentName:"p"},"_OBJ")," list. You can now right click the list, click export and then use this .txt file in your regular Scratch version instead. If you use an obj file which is of the ChromeEngineOBJ format ChromeEngine automatically detects this and loads your BSP tree from the file instead of generating it, which makes loading times much faster."),(0,i.kt)("h2",{id:"materials"},"Materials"),(0,i.kt)("h3",{id:"exporting-an-mtl-file"},"Exporting an MTL file"),(0,i.kt)("p",null,"Materials play a crucial role in defining the appearance of 3D objects. They determine their color, texture, and surface properties like shininess. To create materials, we'll be using Blender, a powerful software. We can then export these materials into ChromeEngine scenes using a file format called MTL."),(0,i.kt)("p",null,'To ensure proper export, remember to use the "Principled BSDF" shader when setting up materials in Blender. Here\'s a step-by-step guide on exporting an MTL file:'),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},'Open Blender and create or modify your materials using the "Principled BSDF" shader.'),(0,i.kt)("li",{parentName:"ol"},"Once you're satisfied with your materials, navigate to ",(0,i.kt)("inlineCode",{parentName:"li"},"File > Export > Wavefront (.obj)"),"."),(0,i.kt)("li",{parentName:"ol"},"In the export options panel, make sure to enable the ",(0,i.kt)("inlineCode",{parentName:"li"},"Write Materials")," option, and then proceed with the export.")),(0,i.kt)("h3",{id:"importing-an-mtl-file"},"Importing an MTL file"),(0,i.kt)("p",null,"Now that you have your MTL file, it's time to import it into ChromeEngine. Follow these steps:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Open the MTL file with a text editor of your choice."),(0,i.kt)("li",{parentName:"ol"},"Copy the material data from the file."),(0,i.kt)("li",{parentName:"ol"},"Paste the copied data into the ",(0,i.kt)("inlineCode",{parentName:"li"},"Materials.importFromMtlFile")," function within ChromeEngine.")),(0,i.kt)("p",null,"Here's an example of how it should look:"),(0,i.kt)(c,{mdxType:"ScratchBlocks"},"\nMaterials.importFromMTL\\(.MTL file data [your file data goes here]\\) :: custom\n"))}h.isMDXComponent=!0},4308:(e,t,n)=>{n.d(t,{Z:()=>o});const o=n.p+"assets/images/set-transform-origin-c6ca15fbc27013c26313cfd6fa5e7696.png"},2779:(e,t,n)=>{n.d(t,{Z:()=>o});const o=n.p+"assets/images/spikes-and-enemy-770eff68a5cb860e19a473b8222d0f14.png"}}]); \ No newline at end of file diff --git a/assets/js/264aad2d.74eabe9d.js b/assets/js/264aad2d.74eabe9d.js new file mode 100644 index 0000000..b504f7f --- /dev/null +++ b/assets/js/264aad2d.74eabe9d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkchrome_engine_docs=self.webpackChunkchrome_engine_docs||[]).push([[295],{3905:(e,t,o)=>{o.d(t,{Zo:()=>c,kt:()=>u});var n=o(7294);function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function r(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,n)}return o}function a(e){for(var t=1;t=0||(i[o]=e[o]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}var s=n.createContext({}),m=function(e){var t=n.useContext(s),o=t;return e&&(o="function"==typeof e?e(t):a(a({},t),e)),o},c=function(e){var t=m(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},h=n.forwardRef((function(e,t){var o=e.components,i=e.mdxType,r=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=m(o),h=i,u=p["".concat(s,".").concat(h)]||p[h]||d[h]||r;return o?n.createElement(u,a(a({ref:t},c),{},{components:o})):n.createElement(u,a({ref:t},c))}));function u(e,t){var o=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=o.length,a=new Array(r);a[0]=h;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:i,a[1]=l;for(var m=2;m{o.r(t),o.d(t,{contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>s});var n=o(7462),i=(o(7294),o(3905));const r={},a="Modelling with Blender",l={unversionedId:"tutorials/Modelling with Blender/Modelling-with-blender",id:"tutorials/Modelling with Blender/Modelling-with-blender",isDocsHomePage:!1,title:"Modelling with Blender",description:"Whilst the built in tools for creating scene geometry are great, if you want to make bigger scenes it will be easier to make them first in a 3D modelling tool and then import them into the engine. One of the best 3D modelling tools out there is Blender, so here's quick tutorial on how to use it with Chrome Engine",source:"@site/docs/tutorials/02-Modelling with Blender/01-Modelling-with-blender.md",sourceDirName:"tutorials/02-Modelling with Blender",slug:"/tutorials/Modelling with Blender/Modelling-with-blender",permalink:"/ChromeEngine-Docs/docs/tutorials/Modelling with Blender/Modelling-with-blender",editUrl:"https://github.com/your-github-username/your-repo-name/edit/main/docs/docs/tutorials/02-Modelling with Blender/01-Modelling-with-blender.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{},sidebar:"tutorialsSidebar",previous:{title:"Interactive Game Elements",permalink:"/ChromeEngine-Docs/docs/tutorials/Platformer Tutorial/Interactive Game Elements"}},s=[{value:"Modelling your scene",id:"modelling-your-scene",children:[]},{value:"Blender to ChromeEngine coordinates",id:"blender-to-chromeengine-coordinates",children:[{value:"Preparing dynamic objects for ChromeEngine",id:"preparing-dynamic-objects-for-chromeengine",children:[]}]},{value:"Importing and exporting the mesh",id:"importing-and-exporting-the-mesh",children:[{value:"Exporting your mesh",id:"exporting-your-mesh",children:[]},{value:"Importing your mesh",id:"importing-your-mesh",children:[]},{value:"Moving the dynamic objects back",id:"moving-the-dynamic-objects-back",children:[]}]},{value:"Importing multiple meshes using obj file data input",id:"importing-multiple-meshes-using-obj-file-data-input",children:[]},{value:"Pre-compiling on Turbowarp and exporting with ExportScene",id:"pre-compiling-on-turbowarp-and-exporting-with-exportscene",children:[]},{value:"Materials",id:"materials",children:[{value:"Exporting an MTL file",id:"exporting-an-mtl-file",children:[]},{value:"Importing an MTL file",id:"importing-an-mtl-file",children:[]}]},{value:"importFromMTL must come before importFromOBJFile",id:"importfrommtl-must-come-before-importfromobjfile",children:[]}],m=(c="ScratchBlocks",function(e){return console.warn("Component "+c+" was not imported, exported, or provided by MDXProvider as global scope"),(0,i.kt)("div",e)});var c;const p={toc:s},d="wrapper";function h(e){let{components:t,...r}=e;return(0,i.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"modelling-with-blender"},"Modelling with Blender"),(0,i.kt)("p",null,"Whilst the built in tools for creating scene geometry are great, if you want to make bigger scenes it will be easier to make them first in a 3D modelling tool and then import them into the engine. One of the best 3D modelling tools out there is Blender, so here's quick tutorial on how to use it with Chrome Engine"),(0,i.kt)("h2",{id:"modelling-your-scene"},"Modelling your scene"),(0,i.kt)("p",null,"We're not going to cover how you make the scene as there are plenty of ",(0,i.kt)("a",{parentName:"p",href:"https://www.youtube.com/watch?v=nIoXOplUvAw"},"great Blender tutorials")," out there. We'll assume you have your scene ready to go. Here's an example scene from the ",(0,i.kt)("a",{parentName:"p",href:"/docs/tutorials/Platformer%20Tutorial/Intro"},"Platformer Tutorial"),":"),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Blender Screenshot of spikes and enemy",src:o(2779).Z,title:"Spikes and Enemies"})),(0,i.kt)("h2",{id:"blender-to-chromeengine-coordinates"},"Blender to ChromeEngine coordinates"),(0,i.kt)("p",null,"Whilst modelling details or setting positions you might want to specify specific coordinates. Unfortunately you can't get the coordinate of vertices yet in ChromeEngine however you can do this in Blender."),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Enter ",(0,i.kt)("inlineCode",{parentName:"li"},"Edit Mode")," and right click on a vertex"),(0,i.kt)("li",{parentName:"ol"},"press ",(0,i.kt)("inlineCode",{parentName:"li"},"N")," to open properties, and from there you can see the coordinates of the vertex.",(0,i.kt)("ol",{parentName:"li"},(0,i.kt)("li",{parentName:"ol"},"Tip: make sure to set to Global!"))),(0,i.kt)("li",{parentName:"ol"},"ChromeEngine and Blender use different coordinate systems but you can easily convert them by just swapping the y and z value. And multiplying the new z by negative 1.")),(0,i.kt)("h3",{id:"preparing-dynamic-objects-for-chromeengine"},"Preparing dynamic objects for ChromeEngine"),(0,i.kt)("p",null,"When you import your scene into ChromeEngine the transform origin of each object will always be the origin. This can be problematic, as when we try to transform these objects and their transform center lies at the origin instead of the center of the object, our transformations will be wrong."),(0,i.kt)("p",null,"To fix this we must reposition our dynamic objects so that their center of rotation is at the origin. We can do this like this:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Navigate to the ",(0,i.kt)("inlineCode",{parentName:"li"},"Object Properties")," tab in the ",(0,i.kt)("inlineCode",{parentName:"li"},"Properties")," panel."),(0,i.kt)("li",{parentName:"ol"},"Write down the current Location value, so that we can reposition back to this location later."),(0,i.kt)("li",{parentName:"ol"},"Set the Location to 0, 0, 0")),(0,i.kt)("p",null,"Here's what this looks like for the example scene from before:\n",(0,i.kt)("img",{alt:"Blender Screenshot of transform origin",src:o(4308).Z,title:"Set transform Origin"})),(0,i.kt)("h2",{id:"importing-and-exporting-the-mesh"},"Importing and exporting the mesh"),(0,i.kt)("h3",{id:"exporting-your-mesh"},"Exporting your mesh"),(0,i.kt)("p",null,"Once you've finished designing your game scene in Blender, export it as an .obj file."),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Select your objects."),(0,i.kt)("li",{parentName:"ol"},"Go to ",(0,i.kt)("inlineCode",{parentName:"li"},"File")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"Export")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"Wavefront (.obj)"),"."),(0,i.kt)("li",{parentName:"ol"},"In the export settings, make sure to disable exporting normals or UVs. ")),(0,i.kt)("h3",{id:"importing-your-mesh"},"Importing your mesh"),(0,i.kt)("p",null,"Now that you have your beautiful .obj file, let's bring it into your ChromeEngine game. To do this we can use the ",(0,i.kt)("inlineCode",{parentName:"p"},"importFromOBJFile")," block:"),(0,i.kt)(m,{mdxType:"ScratchBlocks"},"\nGameObjects.importFromOBJFile \\( CW orientated? <> scale [1] align_center <> .obj file data \\(leave blank if using _OBJ list\\) []\\) :: custom\n"),(0,i.kt)("p",null,"This block when placed within ",(0,i.kt)("inlineCode",{parentName:"p"},"Setup Scene objects")," will let you import a mesh as a ChromeEngine GameObject. It has the following inputs:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"CW orientated?"),' indicates whether your object has clockwise or anticlockwise orientated faces. If your model appears "inside-out" it\'s probably because this is set wrong'),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"scale")," - this is the size of the model on load. ChromeEngine uses BSP and expects all your vertices to be on a normalized scale between -1 to 1. If you find BSP messed up your mesh you should try changing the scale."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"align-centre")," - this will re-centre your mesh, which is helpful if you want to apply rotations to your object, or your mesh file isn't your own."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},".obj file data")," - used if you want to copy and paste obj file data into an input instead of setting the _OBJ file data.")),(0,i.kt)("p",null,"To import the file, assign the function to a variable, right-click on ",(0,i.kt)("inlineCode",{parentName:"p"},"_OBJ"),", select ",(0,i.kt)("inlineCode",{parentName:"p"},"import from file"),", and choose the .obj file you exported earlier."),(0,i.kt)("h3",{id:"moving-the-dynamic-objects-back"},"Moving the dynamic objects back"),(0,i.kt)("p",null,"Previously we moved all the dynamic objects to 0,0,0 so that their rotation centres would be the same as their local origins. However now we need to move them back. The recommended way to do this is to go to the ",(0,i.kt)("inlineCode",{parentName:"p"},"Logic")," sprite, and add to ",(0,i.kt)("inlineCode",{parentName:"p"},"GameObjects.setup()")," custom block a ",(0,i.kt)("inlineCode",{parentName:"p"},"setPosition")," block for each dynamic object, to set it's position back to what it used to be. Thankfully we made sure to write down all the old positions! Remember ChromeEngine and blender don't have the same coordinate system so you will need to convert the coordinates (reminder: we do this by swapping the y and z value. And multiplying the new z by negative 1). Here's an example of how to re-position a dynamic object back to it's old location:"),(0,i.kt)(m,{mdxType:"ScratchBlocks"},"\ndefine GameObjects.setup\\(\\):\n GameObject.setPosition \\( object name [Platform 3] position [0.6] [3.6] [-5.2] \\) :: custom\n"),(0,i.kt)("h2",{id:"importing-multiple-meshes-using-obj-file-data-input"},"Importing multiple meshes using ",(0,i.kt)("inlineCode",{parentName:"h2"},"obj file data")," input"),(0,i.kt)("p",null,"Importing our .obj file to ",(0,i.kt)("inlineCode",{parentName:"p"},"_OBJ")," and loading it once works fine if you have one single level but often your game will need to have many levels, so how would you do this? Thankfully ChromeEngine has you covered. Instead of importing your .obj file into the _OBJ list simply copy and paste it and put it in the optional ",(0,i.kt)("inlineCode",{parentName:"p"},".obj file data")," input in the ",(0,i.kt)("inlineCode",{parentName:"p"},"GameObjects.importFromOBJFile")," block!"),(0,i.kt)(m,{mdxType:"ScratchBlocks"},"\nGameObjects.importFromOBJFile \\( CW orientated? <> scale [1] align_center <> .obj file data \\( leave blank if using _OBJ list \\) [Copy and paste your .obj file here, instead of importing it to _OBJ]\\) :: custom\n"),(0,i.kt)("h2",{id:"pre-compiling-on-turbowarp-and-exporting-with-exportscene"},"Pre-compiling on Turbowarp and exporting with ",(0,i.kt)("inlineCode",{parentName:"h2"},"ExportScene")),(0,i.kt)("p",null,"If your mesh is very complex, the BSP tree generation will take forever on regular scratch so we recommend you use turbowarp to generate your BSP tree and then import it into ChromeEngine. To import an obj file along with a pregenerated bsp tree use ",(0,i.kt)("inlineCode",{parentName:"p"},"ExportScene")),(0,i.kt)(m,{mdxType:"ScratchBlocks"},"\n_OBJ = exportScene\\(\\) :: custom\n"),(0,i.kt)("p",null,'All you need to do is click the green flag and wait for your game to be "compiled" via ChromeEngine on turbowarp, then click on the ',(0,i.kt)("inlineCode",{parentName:"p"},"ExportScene"),", and your new custom ChromeEngine .obj file will be stored in the ",(0,i.kt)("inlineCode",{parentName:"p"},"_OBJ")," list. You can now right click the list, click export and then use this .txt file in your regular Scratch version instead. If you use an obj file which is of the ChromeEngineOBJ format ChromeEngine automatically detects this and loads your BSP tree from the file instead of generating it, which makes loading times much faster."),(0,i.kt)("h2",{id:"materials"},"Materials"),(0,i.kt)("h3",{id:"exporting-an-mtl-file"},"Exporting an MTL file"),(0,i.kt)("p",null,"Materials play a crucial role in defining the appearance of 3D objects. They determine their color, texture, and surface properties like shininess. To create materials, we'll be using Blender, a powerful software. We can then export these materials into ChromeEngine scenes using a file format called MTL."),(0,i.kt)("p",null,'To ensure proper export, remember to use the "Principled BSDF" shader when setting up materials in Blender. Here\'s a step-by-step guide on exporting an MTL file:'),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},'Open Blender and create or modify your materials using the "Principled BSDF" shader.'),(0,i.kt)("li",{parentName:"ol"},"Once you're satisfied with your materials, navigate to ",(0,i.kt)("inlineCode",{parentName:"li"},"File > Export > Wavefront (.obj)"),"."),(0,i.kt)("li",{parentName:"ol"},"In the export options panel, make sure to enable the ",(0,i.kt)("inlineCode",{parentName:"li"},"Write Materials")," option, and then proceed with the export.")),(0,i.kt)("h3",{id:"importing-an-mtl-file"},"Importing an MTL file"),(0,i.kt)("p",null,"Now that you have your MTL file, it's time to import it into ChromeEngine. Follow these steps:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Open the MTL file with a text editor of your choice."),(0,i.kt)("li",{parentName:"ol"},"Copy the material data from the file."),(0,i.kt)("li",{parentName:"ol"},"Paste the copied data into the ",(0,i.kt)("inlineCode",{parentName:"li"},"Materials.importFromMtlFile")," function within ChromeEngine.")),(0,i.kt)("p",null,"Here's an example of how it should look:"),(0,i.kt)(m,{mdxType:"ScratchBlocks"},"\nMaterials.importFromMTL\\(.MTL file data [your file data goes here]\\) :: custom\n"),(0,i.kt)("p",null,"put this block BEFORE the importFromOBJFILE block!"),(0,i.kt)("h2",{id:"importfrommtl-must-come-before-importfromobjfile"},"importFromMTL must come before importFromOBJFile"),(0,i.kt)("p",null,"Inorder for ChromeEngine to know that your obj file has valid textures you need to run the importFromMTL block BEFORE you run the importFromOBJFile block"),(0,i.kt)(m,{mdxType:"ScratchBlocks"},"\nMaterials.importFromMTL\\(.MTL file data [your file data goes here]\\) :: custom\nGameObjects.importFromOBJFile \\( CW orientated? <> scale [1] align_center <> .obj file data \\(leave blank if using _OBJ list\\) []\\) :: custom\n"))}h.isMDXComponent=!0},4308:(e,t,o)=>{o.d(t,{Z:()=>n});const n=o.p+"assets/images/set-transform-origin-c6ca15fbc27013c26313cfd6fa5e7696.png"},2779:(e,t,o)=>{o.d(t,{Z:()=>n});const n=o.p+"assets/images/spikes-and-enemy-770eff68a5cb860e19a473b8222d0f14.png"}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.33f28e50.js b/assets/js/runtime~main.f535701b.js similarity index 98% rename from assets/js/runtime~main.33f28e50.js rename to assets/js/runtime~main.f535701b.js index 5a64dcc..73e131e 100644 --- a/assets/js/runtime~main.33f28e50.js +++ b/assets/js/runtime~main.f535701b.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,r,c,d={},f={};function o(e){var a=f[e];if(void 0!==a)return a.exports;var t=f[e]={id:e,loaded:!1,exports:{}};return d[e].call(t.exports,t,t.exports,o),t.loaded=!0,t.exports}o.m=d,o.c=f,e=[],o.O=(a,t,r,c)=>{if(!t){var d=1/0;for(i=0;i=c)&&Object.keys(o.O).every((e=>o.O[e](t[b])))?t.splice(b--,1):(f=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[t,r,c]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var c=Object.create(null);o.r(c);var d={};a=a||[null,t({}),t([]),t(t)];for(var f=2&r&&e;"object"==typeof f&&!~a.indexOf(f);f=t(f))Object.getOwnPropertyNames(f).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,o.d(c,d),c},o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,t)=>(o.f[t](e,a),a)),[])),o.u=e=>"assets/js/"+({13:"01a85c17",20:"326ab27f",53:"935f2afb",78:"cf8f3535",89:"a6aa9e1f",103:"ccc49370",116:"c3fa2586",118:"9ae37d86",121:"55960ee5",142:"d8e5e8b0",144:"13133095",173:"d4f64e9b",195:"c4f5d8e4",200:"fcb4ad3a",227:"5eb71dcf",233:"80d03873",268:"84ccdea1",295:"264aad2d",325:"3178b499",345:"5b938b36",347:"cbd96d5b",360:"1c4988c8",387:"cfcf5873",423:"78c052f8",430:"417722bc",443:"5bfd2db9",453:"d99dff56",514:"1be78505",535:"814f3328",608:"9e4087bc",610:"6875c492",679:"ff1905e7",700:"7609b394",718:"3ed44699",724:"d3b78fab",751:"3720c009",777:"b9208891",828:"5a49d1f8",886:"aaebae10",918:"17896441",966:"109c50bf",989:"9e576275"}[e]||e)+"."+{13:"ab47ca30",20:"88340318",53:"6f7aebaa",75:"d4726937",78:"985b267b",89:"fe36fa8c",103:"302dc573",116:"23fe197c",118:"4118871f",121:"d4840fbd",142:"f944e756",144:"4369d9e6",147:"992c1496",159:"cce0dab4",173:"e72eae80",195:"caabb548",200:"32fc815e",227:"029792bf",233:"748dc2f9",268:"99f3773b",295:"461df627",325:"e28be1bf",345:"7eec0451",347:"4a595f4e",360:"28777732",387:"c9638dd2",423:"60a0c73a",430:"aaa589a2",443:"2bd7e089",453:"c29801d4",514:"5f9342d4",535:"af6264b9",608:"69035efb",610:"f502a22c",679:"1d9b60cd",698:"6d2814de",700:"a8e98834",718:"348bc4db",724:"f4b1324a",727:"e401b5f5",751:"344b2709",777:"81491ae8",828:"883354a0",886:"1ca6b042",918:"62e71b40",966:"63cf6166",989:"9728925f"}[e]+".js",o.miniCssF=e=>"assets/css/styles.b2352ca9.css",o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},c="chrome-engine-docs:",o.l=(e,a,t,d)=>{if(r[e])r[e].push(a);else{var f,b;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{f.onerror=f.onload=null,clearTimeout(l);var c=r[e];if(delete r[e],f.parentNode&&f.parentNode.removeChild(f),c&&c.forEach((e=>e(t))),a)return a(t)},l=setTimeout(u.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=u.bind(null,f.onerror),f.onload=u.bind(null,f.onload),b&&document.head.appendChild(f)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/ChromeEngine-Docs/",o.gca=function(e){return e={13133095:"144",17896441:"918","01a85c17":"13","326ab27f":"20","935f2afb":"53",cf8f3535:"78",a6aa9e1f:"89",ccc49370:"103",c3fa2586:"116","9ae37d86":"118","55960ee5":"121",d8e5e8b0:"142",d4f64e9b:"173",c4f5d8e4:"195",fcb4ad3a:"200","5eb71dcf":"227","80d03873":"233","84ccdea1":"268","264aad2d":"295","3178b499":"325","5b938b36":"345",cbd96d5b:"347","1c4988c8":"360",cfcf5873:"387","78c052f8":"423","417722bc":"430","5bfd2db9":"443",d99dff56:"453","1be78505":"514","814f3328":"535","9e4087bc":"608","6875c492":"610",ff1905e7:"679","7609b394":"700","3ed44699":"718",d3b78fab:"724","3720c009":"751",b9208891:"777","5a49d1f8":"828",aaebae10:"886","109c50bf":"966","9e576275":"989"}[e]||e,o.p+o.u(e)},(()=>{var e={303:0,532:0};o.f.j=(a,t)=>{var r=o.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(303|532)$/.test(a))e[a]=0;else{var c=new Promise(((t,c)=>r=e[a]=[t,c]));t.push(r[2]=c);var d=o.p+o.u(a),f=new Error;o.l(d,(t=>{if(o.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var c=t&&("load"===t.type?"missing":t.type),d=t&&t.target&&t.target.src;f.message="Loading chunk "+a+" failed.\n("+c+": "+d+")",f.name="ChunkLoadError",f.type=c,f.request=d,r[1](f)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,t)=>{var r,c,d=t[0],f=t[1],b=t[2],n=0;if(d.some((a=>0!==e[a]))){for(r in f)o.o(f,r)&&(o.m[r]=f[r]);if(b)var i=b(o)}for(a&&a(t);n{"use strict";var e,a,t,r,c,d={},f={};function o(e){var a=f[e];if(void 0!==a)return a.exports;var t=f[e]={id:e,loaded:!1,exports:{}};return d[e].call(t.exports,t,t.exports,o),t.loaded=!0,t.exports}o.m=d,o.c=f,e=[],o.O=(a,t,r,c)=>{if(!t){var d=1/0;for(i=0;i=c)&&Object.keys(o.O).every((e=>o.O[e](t[b])))?t.splice(b--,1):(f=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[t,r,c]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var c=Object.create(null);o.r(c);var d={};a=a||[null,t({}),t([]),t(t)];for(var f=2&r&&e;"object"==typeof f&&!~a.indexOf(f);f=t(f))Object.getOwnPropertyNames(f).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,o.d(c,d),c},o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,t)=>(o.f[t](e,a),a)),[])),o.u=e=>"assets/js/"+({13:"01a85c17",20:"326ab27f",53:"935f2afb",78:"cf8f3535",89:"a6aa9e1f",103:"ccc49370",116:"c3fa2586",118:"9ae37d86",121:"55960ee5",142:"d8e5e8b0",144:"13133095",173:"d4f64e9b",195:"c4f5d8e4",200:"fcb4ad3a",227:"5eb71dcf",233:"80d03873",268:"84ccdea1",295:"264aad2d",325:"3178b499",345:"5b938b36",347:"cbd96d5b",360:"1c4988c8",387:"cfcf5873",423:"78c052f8",430:"417722bc",443:"5bfd2db9",453:"d99dff56",514:"1be78505",535:"814f3328",608:"9e4087bc",610:"6875c492",679:"ff1905e7",700:"7609b394",718:"3ed44699",724:"d3b78fab",751:"3720c009",777:"b9208891",828:"5a49d1f8",886:"aaebae10",918:"17896441",966:"109c50bf",989:"9e576275"}[e]||e)+"."+{13:"ab47ca30",20:"88340318",53:"6f7aebaa",75:"d4726937",78:"985b267b",89:"fe36fa8c",103:"302dc573",116:"23fe197c",118:"4118871f",121:"d4840fbd",142:"f944e756",144:"4369d9e6",147:"992c1496",159:"cce0dab4",173:"e72eae80",195:"caabb548",200:"32fc815e",227:"029792bf",233:"748dc2f9",268:"99f3773b",295:"74eabe9d",325:"e28be1bf",345:"7eec0451",347:"4a595f4e",360:"28777732",387:"c9638dd2",423:"60a0c73a",430:"aaa589a2",443:"2bd7e089",453:"c29801d4",514:"5f9342d4",535:"af6264b9",608:"69035efb",610:"f502a22c",679:"1d9b60cd",698:"6d2814de",700:"a8e98834",718:"348bc4db",724:"f4b1324a",727:"e401b5f5",751:"344b2709",777:"81491ae8",828:"883354a0",886:"1ca6b042",918:"62e71b40",966:"63cf6166",989:"9728925f"}[e]+".js",o.miniCssF=e=>"assets/css/styles.b2352ca9.css",o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},c="chrome-engine-docs:",o.l=(e,a,t,d)=>{if(r[e])r[e].push(a);else{var f,b;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{f.onerror=f.onload=null,clearTimeout(l);var c=r[e];if(delete r[e],f.parentNode&&f.parentNode.removeChild(f),c&&c.forEach((e=>e(t))),a)return a(t)},l=setTimeout(u.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=u.bind(null,f.onerror),f.onload=u.bind(null,f.onload),b&&document.head.appendChild(f)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/ChromeEngine-Docs/",o.gca=function(e){return e={13133095:"144",17896441:"918","01a85c17":"13","326ab27f":"20","935f2afb":"53",cf8f3535:"78",a6aa9e1f:"89",ccc49370:"103",c3fa2586:"116","9ae37d86":"118","55960ee5":"121",d8e5e8b0:"142",d4f64e9b:"173",c4f5d8e4:"195",fcb4ad3a:"200","5eb71dcf":"227","80d03873":"233","84ccdea1":"268","264aad2d":"295","3178b499":"325","5b938b36":"345",cbd96d5b:"347","1c4988c8":"360",cfcf5873:"387","78c052f8":"423","417722bc":"430","5bfd2db9":"443",d99dff56:"453","1be78505":"514","814f3328":"535","9e4087bc":"608","6875c492":"610",ff1905e7:"679","7609b394":"700","3ed44699":"718",d3b78fab:"724","3720c009":"751",b9208891:"777","5a49d1f8":"828",aaebae10:"886","109c50bf":"966","9e576275":"989"}[e]||e,o.p+o.u(e)},(()=>{var e={303:0,532:0};o.f.j=(a,t)=>{var r=o.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(303|532)$/.test(a))e[a]=0;else{var c=new Promise(((t,c)=>r=e[a]=[t,c]));t.push(r[2]=c);var d=o.p+o.u(a),f=new Error;o.l(d,(t=>{if(o.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var c=t&&("load"===t.type?"missing":t.type),d=t&&t.target&&t.target.src;f.message="Loading chunk "+a+" failed.\n("+c+": "+d+")",f.name="ChunkLoadError",f.type=c,f.request=d,r[1](f)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,t)=>{var r,c,d=t[0],f=t[1],b=t[2],n=0;if(d.some((a=>0!==e[a]))){for(r in f)o.o(f,r)&&(o.m[r]=f[r]);if(b)var i=b(o)}for(a&&a(t);n Archive | ChromeEngine Documentation - +

Archive

Archive

2023

- + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 23a0bc4..9e83dd5 100644 --- a/blog/index.html +++ b/blog/index.html @@ -6,13 +6,13 @@ Blog | ChromeEngine Documentation - +

· One min read
Chrome_Cat

Hi all, I've created this documentation website for ChromeEngine and i'm excited for all of you to try it out. This part of the website is the blog section and i'll be using it to post updates if I make any significant changes to the site.

In the mean time, keep on Scratching!

- + \ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index 0afb172..6a57225 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -6,13 +6,13 @@ Tags | ChromeEngine Documentation - +

Tags

- + \ No newline at end of file diff --git a/blog/tags/scratch/index.html b/blog/tags/scratch/index.html index 28d8f7c..99ef32f 100644 --- a/blog/tags/scratch/index.html +++ b/blog/tags/scratch/index.html @@ -6,13 +6,13 @@ One post tagged with "Scratch" | ChromeEngine Documentation - +

One post tagged with "Scratch"

View All Tags

· One min read
Chrome_Cat

Hi all, I've created this documentation website for ChromeEngine and i'm excited for all of you to try it out. This part of the website is the blog section and i'll be using it to post updates if I make any significant changes to the site.

In the mean time, keep on Scratching!

- + \ No newline at end of file diff --git a/blog/tags/welcome/index.html b/blog/tags/welcome/index.html index ae4ff50..da8005b 100644 --- a/blog/tags/welcome/index.html +++ b/blog/tags/welcome/index.html @@ -6,13 +6,13 @@ One post tagged with "Welcome" | ChromeEngine Documentation - +

One post tagged with "Welcome"

View All Tags

· One min read
Chrome_Cat

Hi all, I've created this documentation website for ChromeEngine and i'm excited for all of you to try it out. This part of the website is the blog section and i'll be using it to post updates if I make any significant changes to the site.

In the mean time, keep on Scratching!

- + \ No newline at end of file diff --git a/blog/welcome/index.html b/blog/welcome/index.html index 3677397..bfefe24 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -6,13 +6,13 @@ Welcome | ChromeEngine Documentation - +

Welcome

· One min read
Chrome_Cat

Hi all, I've created this documentation website for ChromeEngine and i'm excited for all of you to try it out. This part of the website is the blog section and i'll be using it to post updates if I make any significant changes to the site.

In the mean time, keep on Scratching!

- + \ No newline at end of file diff --git a/docs/system_docs/BSP/Dynamic Objects/index.html b/docs/system_docs/BSP/Dynamic Objects/index.html index f68c02e..4ea1bfc 100644 --- a/docs/system_docs/BSP/Dynamic Objects/index.html +++ b/docs/system_docs/BSP/Dynamic Objects/index.html @@ -6,7 +6,7 @@ Subtrees for dynamic objects | ChromeEngine Documentation - + @@ -30,7 +30,7 @@ define bsp.remove_leaf_node \((*node)\)

Removes a leaf node by removing all references to it within the bsp.tree.

  1. Remove edges to the node
  2. If the node is at the end of the bsp.tree list simply delete the data, otherwise to preserve pointers just assign the first item of data to be TOMBSTONE to mark that it was deleted.
- + \ No newline at end of file diff --git a/docs/system_docs/BSP/Prims/index.html b/docs/system_docs/BSP/Prims/index.html index c1cdb57..a228c57 100644 --- a/docs/system_docs/BSP/Prims/index.html +++ b/docs/system_docs/BSP/Prims/index.html @@ -6,7 +6,7 @@ _*prims | ChromeEngine Documentation - + @@ -30,7 +30,7 @@ define bsp._*prims.sanity_check \( (*left) (*right) \)

The bsp._*prims.sanity_check custom block checks the consistency of the _*prims list between the left and right indices. It iterates over the primitives and checks that each primitive index is a multiple of the size of a primitive. It also checks that the previous and next element pointers for each primitive point to the correct elements. If an inconsistency is detected, a breakpoint is triggered.

- + \ No newline at end of file diff --git a/docs/system_docs/BSP/Tree Generation/index.html b/docs/system_docs/BSP/Tree Generation/index.html index 740b973..cae7813 100644 --- a/docs/system_docs/BSP/Tree Generation/index.html +++ b/docs/system_docs/BSP/Tree Generation/index.html @@ -6,7 +6,7 @@ Tree Generation | ChromeEngine Documentation - + @@ -36,7 +36,7 @@ define _*prim = primitives.split_prim \( *prim (*prim) *intersectA (*A) *intersectB (*B) \)

This custom block splits a primitive into two at the given intersection points. The block takes as input the primitive to split (*prim), and two intersection points (*intersectA, *intersectB).

The process of splitting involves changing the connectivity of vertices in the polygon by inserting new vertices at the intersection points. The first intersection point is inserted after the vertex indexed by *intersectA and the second intersection point is inserted after the vertex indexed by *intersectB. The links between vertices are updated to ensure the continuity of the polygons after the split.

A new primitive is then created for the second half of the split polygon. This new primitive shares the same attributes as the original primitive but has a different set of vertices. The primitive count _split_count is incremented as well.

- + \ No newline at end of file diff --git a/docs/system_docs/BSP/Tree Traversal/index.html b/docs/system_docs/BSP/Tree Traversal/index.html index 6946dd1..964e2e0 100644 --- a/docs/system_docs/BSP/Tree Traversal/index.html +++ b/docs/system_docs/BSP/Tree Traversal/index.html @@ -6,13 +6,13 @@ Tree Traversal | ChromeEngine Documentation - +

Tree Traversal

What is it?#

The BSP tree traversal step is called every frame as part of the main render loop. What this does is perform an inorder traversal of the previously generated BSP tree, but with node child order swapped if the the node plane faces away from the camera. The order of traversal is exactly equivalent to a perfect sort of the primitives from the point of view of the camera.

bsp.traversal pseudo code#

  1. Set current to the root node.
  2. While bsp.stack is not empty:
    1. Traverse from current down to a child node.
      1. Add the current node to the top of bsp.stack
      2. At each intermediate node check if the plane associated with the node faces the camera or not, and if it does, current is set to the left child, otherwise it's set to the right child
    2. Once at the child, pop one item off the top of bsp.stack and current to this.
    3. Get a pointer to the start (_**prim) and end (_*pivot_prims_tail) of the sublist of *prim list which is stored by the current node. This sublist has a left and right sub-sublist which corresponds to the set of frontfacing primitives and backfacing ones and is used.
      1. Depending on whether we are looking at the backface or frontface we either pick the leftside of the sublist or the right side. (this is important for double sided primitives). In the case of non-double sided primitives, then only one side of this list will have items. Picking a side of the list without items is equivalent to backface culling.
    4. If the first item in the sublist does not have a normal, aka is not a polygon, and the sublist has length greater than 1, we apply bsp._*prims.insertion_sort_by_point_prim_z to sort the sublist by the z coordinate of each item's bounding sphere in the list
    5. Finally we iterate over each primitive in the _*prims sublist, calculate it's shading, whether it should be z-clipped, and whether we're looking at the front of the primitive (which is only applicable to double sided prims as for single sided we only ever reach this stage if we are looking at the prims frontside)
      1. if the primitive is a container primitive, aka contains a pointer to a subtree, we recursively traverse that subtree. Importantly we pass in all the variables from this scope so that if they get changed one level down they can be reset, as if they never got changed.
  3. If we are calling bsp.traversal from a recursion depth of more than 1, we reset any variables to emulate a local scope.
- + \ No newline at end of file diff --git a/docs/system_docs/Intro/index.html b/docs/system_docs/Intro/index.html index 408b233..69e8834 100644 --- a/docs/system_docs/Intro/index.html +++ b/docs/system_docs/Intro/index.html @@ -6,13 +6,13 @@ Intro | ChromeEngine Documentation - +

Intro

This part of the website is dedicated to documenting the most complex parts of ChromeEngine, to make it easier to understand how everything works.

The following is covered:

  • Bsp

    • The *prims linked list
    • Tree Generation
    • Tree Traversal
    • Dynamic Objects

  • Physics

    • Bounding Spheres
    • Rigid Body Physics
    • Collision Tests

It aims to be concise and comprehensive.

- + \ No newline at end of file diff --git a/docs/system_docs/Physics/BoundingSpheres/index.html b/docs/system_docs/Physics/BoundingSpheres/index.html index 7b51463..7627ec9 100644 --- a/docs/system_docs/Physics/BoundingSpheres/index.html +++ b/docs/system_docs/Physics/BoundingSpheres/index.html @@ -6,7 +6,7 @@ Bounding Spheres Generation | ChromeEngine Documentation - + @@ -30,7 +30,7 @@ define _x,_y,_z,_r = SphereOfSphereAndPt \( Sphere (Sx) (Sy) (Sz) (Sr), Pt (Px) (Py) (Pz) \)

This custom block calculates a new bounding sphere that includes a given point and a current bounding sphere. If the given point is outside the current bounding sphere, it calculates a new bounding sphere with a radius half way between the current bounding sphere and the given point, and a center that lies on the line between the center of the current bounding sphere and the given point, closer to the given point.

- + \ No newline at end of file diff --git a/docs/system_docs/Physics/Collision Tests/index.html b/docs/system_docs/Physics/Collision Tests/index.html index fcc0815..89ac4c5 100644 --- a/docs/system_docs/Physics/Collision Tests/index.html +++ b/docs/system_docs/Physics/Collision Tests/index.html @@ -6,13 +6,13 @@ Collision Tests | ChromeEngine Documentation - +

Collision Tests

ChromeEngine's collision tests are based on the code found at https://realtimecollisiondetection.net/. So if you want more information just go there.

Pseudo code#

  1. For each primitive _*prim that is a) not the player b) is a polygon c) has a material with collisions turned on
    1. If the distance the player travelled in one frame is greater than it's radius, then we apply anti_tunneling
      1. Cast a ray between the players old and new position and find the closest point on that ray to _*prim
      2. Use the closest point location for the players bounding sphere centre instead of it's actual centre.
    2. Perform a sphere to sphere-bounded polygon collision test
      1. Check if the sphere of the player and bounding-sphere of the polygon are closer than the sum of their radii. If no return.
      2. Perform a sphere-polygon collision test (exactly the same as 5.2.8 Testing Sphere against Polygon of RTCD)
        1. Check if the sphere intersects the polygon's plane. If no return.
        2. Test if the sphere intersects any of the polygons edges.
          1. If yes return the edge intersection point and the closest point on the sphere to the edge
        3. Find an axis plane which is not orthogonal to the polygon's plane.
        4. Project the polygon onto it by removing either the x,y or z component for each polygon vertex depending on which plane was chosen. Also project the sphere centre onto the same plane with the same method.
        5. If the projected Polygon is a tri perform a PointInTri test Else perform a PointInPolygon test.
- + \ No newline at end of file diff --git a/docs/system_docs/Physics/Rigid Body Physics/index.html b/docs/system_docs/Physics/Rigid Body Physics/index.html index 6b3e1ec..87772a4 100644 --- a/docs/system_docs/Physics/Rigid Body Physics/index.html +++ b/docs/system_docs/Physics/Rigid Body Physics/index.html @@ -6,13 +6,13 @@ Rigid Body Physics | ChromeEngine Documentation - +

Rigid Body Physics

What is it?#

ChromeEngine contains a powerful 3D rigid body physics engine. It is a simplified 3D version of Randy Gaul's ImpulseEngine. Critically this engine operates fully under the assumption that all forces during a collision are the same as an objects impulse value during a collision.

Physics pseudo code#

  1. Update the players velocity
    1. Iterate over the @player_forces list and determine the element wise sum of all the forces, then add this to the Players physical velocity.
    2. Add the force vector as set by the first three items of the @player_forces_controlled list to the Players controlled velocity.
    3. Update the player velocity to be a combination of it's physical and controlled velocity. The physical velocity is multiplied by delta_t to account for frame rate.
    4. Dampen both controlled and physical velocity
  2. Update player position using it's velocity
  3. Detect all collisions (discussed in detail in the Collision Tests section)
  4. Resolve the collision with earliest time of impact.
  5. Resolve remaining collisions in random order

Collision resolution pseudo code#

Collision resolution involves the following steps:

  1. Retrieve the collision information
  2. If the collision penetrated deeper than @penetration_thresh, move the player backwards along the collision normal so it is no longer penetrating
  3. Add the collision forces associated with the collision.
    1. If the object is moving then we find the Angular and tangential velocity of the object's moving/spinning bounding sphere at the players location.
    2. We calculate the magnitude of the collision force as the dot product of the player's velocity minus the objects velocity and the collision normal.
    3. We add a force with this magnitude in the direction of the collision normal multiplied 1 + the _restitution value of the materia to the @player_forces list
      1. since we want it to apply a force which cancels out all the forwards velocity of the player and then additional force (_restitution) which bounces it backwards.
    4. We calculate the magnitude of the collision force again like before but using the players physical velocity only
    5. We calculate the tagential component of the collision force by subtracting the main collision force from the players physical velocity minus the objects velocity. We add this tangential force to the @player_forces list.
      1. We also prefix it's label with a "t:" to make it clear that it's tagential force.
- + \ No newline at end of file diff --git a/docs/tags/index.html b/docs/tags/index.html index dfebc19..92e5ed1 100644 --- a/docs/tags/index.html +++ b/docs/tags/index.html @@ -6,13 +6,13 @@ Tags | ChromeEngine Documentation - +

Tags

- + \ No newline at end of file diff --git a/docs/tutorials/Modelling with Blender/Modelling-with-blender/index.html b/docs/tutorials/Modelling with Blender/Modelling-with-blender/index.html index 9603ccf..a85d791 100644 --- a/docs/tutorials/Modelling with Blender/Modelling-with-blender/index.html +++ b/docs/tutorials/Modelling with Blender/Modelling-with-blender/index.html @@ -6,15 +6,15 @@ Modelling with Blender | ChromeEngine Documentation - +

Modelling with Blender

Whilst the built in tools for creating scene geometry are great, if you want to make bigger scenes it will be easier to make them first in a 3D modelling tool and then import them into the engine. One of the best 3D modelling tools out there is Blender, so here's quick tutorial on how to use it with Chrome Engine

Modelling your scene#

We're not going to cover how you make the scene as there are plenty of great Blender tutorials out there. We'll assume you have your scene ready to go. Here's an example scene from the Platformer Tutorial:

Blender Screenshot of spikes and enemy

Blender to ChromeEngine coordinates#

Whilst modelling details or setting positions you might want to specify specific coordinates. Unfortunately you can't get the coordinate of vertices yet in ChromeEngine however you can do this in Blender.

  1. Enter Edit Mode and right click on a vertex
  2. press N to open properties, and from there you can see the coordinates of the vertex.
    1. Tip: make sure to set to Global!
  3. ChromeEngine and Blender use different coordinate systems but you can easily convert them by just swapping the y and z value. And multiplying the new z by negative 1.

Preparing dynamic objects for ChromeEngine#

When you import your scene into ChromeEngine the transform origin of each object will always be the origin. This can be problematic, as when we try to transform these objects and their transform center lies at the origin instead of the center of the object, our transformations will be wrong.

To fix this we must reposition our dynamic objects so that their center of rotation is at the origin. We can do this like this:

  1. Navigate to the Object Properties tab in the Properties panel.
  2. Write down the current Location value, so that we can reposition back to this location later.
  3. Set the Location to 0, 0, 0

Here's what this looks like for the example scene from before: -Blender Screenshot of transform origin

Importing and exporting the mesh#

Exporting your mesh#

Once you've finished designing your game scene in Blender, export it as an .obj file.

  1. Select your objects.
  2. Go to File -> Export -> Wavefront (.obj).
  3. In the export settings, make sure to disable exporting normals or UVs.

Importing your mesh#

Now that you have your beautiful .obj file, let's bring it into your ChromeEngine game. To do this we can use the import_from_OBJ_file block:

+Blender Screenshot of transform origin
Importing and exporting the mesh#
Exporting your mesh#
Once you've finished designing your game scene in Blender, export it as an .obj file.
  1. Select your objects.
  2. Go to File -> Export -> Wavefront (.obj).
  3. In the export settings, make sure to disable exporting normals or UVs. 
Importing your mesh#
Now that you have your beautiful .obj file, let's bring it into your ChromeEngine game. To do this we can use the importFromOBJFile block:
 
-GameObjects.import_from_OBJ_file \( CW orientated? <> scale [1] align_center <> .obj file data \(leave blank if using _OBJ list\) []\) :: custom
+GameObjects.importFromOBJFile \( CW orientated? <> scale [1] align_center <> .obj file data \(leave blank if using _OBJ list\) []\) :: custom
 
This block when placed within Setup Scene objects will let you import a mesh as a ChromeEngine GameObject. It has the following inputs:
  • CW orientated? indicates whether your object has clockwise or anticlockwise orientated faces. If your model appears "inside-out" it's probably because this is set wrong
  • scale - this is the size of the model on load. ChromeEngine uses BSP and expects all your vertices to be on a normalized scale between -1 to 1. If you find BSP messed up your mesh you should try changing the scale.
  • align-centre - this will re-centre your mesh, which is helpful if you want to apply rotations to your object, or your mesh file isn't your own.
  • .obj file data - used if you want to copy and paste obj file data into an input instead of setting the _OBJ file data.
To import the file, assign the function to a variable, right-click on _OBJ, select import from file, and choose the .obj file you exported earlier.
Moving the dynamic objects back#
Previously we moved all the dynamic objects to 0,0,0 so that their rotation centres would be the same as their local origins. However now we need to move them back. The recommended way to do this is to go to the Logic sprite, and add to GameObjects.setup() custom block a setPosition block for each dynamic object, to set it's position back to what it used to be. Thankfully we made sure to write down all the old positions! Remember ChromeEngine and blender don't have the same coordinate system so you will need to convert the coordinates (reminder: we do this by swapping the y and z value. And multiplying the new z by negative 1). Here's an example of how to re-position a dynamic object back to it's old location:
 
 define GameObjects.setup\(\):
@@ -28,8 +28,12 @@
 
All you need to do is click the green flag and wait for your game to be "compiled" via ChromeEngine on turbowarp, then click on the ExportScene, and your new custom ChromeEngine .obj file will be stored in the _OBJ list. You can now right click the list, click export and then use this .txt file in your regular Scratch version instead. If you use an obj file which is of the ChromeEngineOBJ format ChromeEngine automatically detects this and loads your BSP tree from the file instead of generating it, which makes loading times much faster.
Materials#
Exporting an MTL file#
Materials play a crucial role in defining the appearance of 3D objects. They determine their color, texture, and surface properties like shininess. To create materials, we'll be using Blender, a powerful software. We can then export these materials into ChromeEngine scenes using a file format called MTL.
To ensure proper export, remember to use the "Principled BSDF" shader when setting up materials in Blender. Here's a step-by-step guide on exporting an MTL file:
  1. Open Blender and create or modify your materials using the "Principled BSDF" shader.
  2. Once you're satisfied with your materials, navigate to File > Export > Wavefront (.obj).
  3. In the export options panel, make sure to enable the Write Materials option, and then proceed with the export.
Importing an MTL file#
Now that you have your MTL file, it's time to import it into ChromeEngine. Follow these steps:
  1. Open the MTL file with a text editor of your choice.
  2. Copy the material data from the file.
  3. Paste the copied data into the Materials.importFromMtlFile function within ChromeEngine.
Here's an example of how it should look:
 
 Materials.importFromMTL\(.MTL file data [your file data goes here]\) :: custom
-
- +

put this block BEFORE the importFromOBJFILE block!

importFromMTL must come before importFromOBJFile#

Inorder for ChromeEngine to know that your obj file has valid textures you need to run the importFromMTL block BEFORE you run the importFromOBJFile block

+
+Materials.importFromMTL\(.MTL file data [your file data goes here]\) :: custom
+GameObjects.importFromOBJFile \( CW orientated? <> scale [1] align_center <> .obj file data \(leave blank if using _OBJ list\) []\) :: custom
+
+ \ No newline at end of file diff --git a/docs/tutorials/Platformer Tutorial/Adding Materials/index.html b/docs/tutorials/Platformer Tutorial/Adding Materials/index.html index 1ce12b6..27d0550 100644 --- a/docs/tutorials/Platformer Tutorial/Adding Materials/index.html +++ b/docs/tutorials/Platformer Tutorial/Adding Materials/index.html @@ -6,7 +6,7 @@ Adding Materials | ChromeEngine Documentation - + @@ -37,7 +37,7 @@ Materials.setDoubleSided \( [Flag] \):: custom GameObjects.createTri/Quad \(Pt A [0] [6.1] [-23] Pt B [0] [6.4] [-23] Pt C [-0.5] [6.4] [-23] Pt D \(leave blank if tri\) [-0.5] [6.1] [-23] parent [Flag Pole] material [Flag] name [Flag Fabric]\) :: custom

Finally here's our finished flag with materials!

Flag Finished

Wrapping up and Additional Resources#

Congratulations! If you did all the steps correctly, you should now have something that looks a bit like this when you click the green flag:

Scene Finished

Here's the finished code you should have after completing the Setting the Scene tutorial stage.

Finished Code

For more detailed information on adding materials to your scene in ChromeEngine, you can visit Materials in our documentation.

In the next part of this tutorial, we'll add movement and interaction to our game! Keep learning, and happy coding!

- + \ No newline at end of file diff --git a/docs/tutorials/Platformer Tutorial/Create the Platforms/index.html b/docs/tutorials/Platformer Tutorial/Create the Platforms/index.html index 388bb13..da3d766 100644 --- a/docs/tutorials/Platformer Tutorial/Create the Platforms/index.html +++ b/docs/tutorials/Platformer Tutorial/Create the Platforms/index.html @@ -6,7 +6,7 @@ Modelling Geometry | ChromeEngine Documentation - + @@ -50,7 +50,7 @@ set [@ground_y v] to [-1]

Wrapping up and Additional Resources#

Congratulations! If you did all the steps correctly, you should now have something that looks a bit like this when you click the green flag:

Scene Finished

Here's the finished code you should have after completing this stage of the tutorial.

Finished Code

For more detailed information on setting up the scene in ChromeEngine, you can visit Modelling in our documentation.

In the next part of this tutorial, we'll add movement and interaction to our game! Keep learning, and happy coding!

- + \ No newline at end of file diff --git a/docs/tutorials/Platformer Tutorial/Interactive Game Elements/index.html b/docs/tutorials/Platformer Tutorial/Interactive Game Elements/index.html index 952cb9c..e1f39e3 100644 --- a/docs/tutorials/Platformer Tutorial/Interactive Game Elements/index.html +++ b/docs/tutorials/Platformer Tutorial/Interactive Game Elements/index.html @@ -6,7 +6,7 @@ Interactive Game Elements | ChromeEngine Documentation - + @@ -38,7 +38,7 @@ switch costume to (win_screen v) stamp

This simply checks if we're in the has_won state and if so shows the win_screen.

Finished code for interactions#

If you got stuck you can simply copy the finished code from below:

Finished Code

For more detailed information on object interactions in ChromeEngine, you can visit the guide Object Interactions

Our Platformer is Complete!#

Congratulations!

And there you have it! Our platformer game is now Complete! If you are struggling with any part we recommend you check out the Platformer Tutorial project on Scratch. If you click See Inside you can view all the final code and compare it to your own code.

We hope you enjoyed the tutorial and can't wait to see what you make with ChromeEngine! For now ... Keep on Scratching!

- + \ No newline at end of file diff --git a/docs/tutorials/Platformer Tutorial/Intro/index.html b/docs/tutorials/Platformer Tutorial/Intro/index.html index e7fcc19..2641a8f 100644 --- a/docs/tutorials/Platformer Tutorial/Intro/index.html +++ b/docs/tutorials/Platformer Tutorial/Intro/index.html @@ -6,7 +6,7 @@ Intro | ChromeEngine Documentation - + @@ -17,7 +17,7 @@ set [@shadows? v] to [0]

Ready, set, go!#

So, are you ready to embark on this exciting adventure of creating your very own platformer game? Let's jump right into it and start crafting an immersive world of platforms and challenges! 🎮🌟

- + \ No newline at end of file diff --git a/docs/tutorials/Platformer Tutorial/Moving Objects/index.html b/docs/tutorials/Platformer Tutorial/Moving Objects/index.html index a9015a8..a006c6a 100644 --- a/docs/tutorials/Platformer Tutorial/Moving Objects/index.html +++ b/docs/tutorials/Platformer Tutorial/Moving Objects/index.html @@ -6,7 +6,7 @@ Moving Objects | ChromeEngine Documentation - + @@ -38,7 +38,7 @@ if <<([abs v] of ((@player_x)-[0]))< [1.25]> and <([abs v] of ((@player_z)-[-20]))< [1.85]>>then GameObjects.move \( object name [Enemy] steps [0.04]\) :: custom
  • 0 and -20 are the x,z coordinate of the platform
  • 1.25 and 1.85 are a little more than half the width and depth of platform 6.

The code may look a bit complex, but all it means is "if the player's x is within half the width of the platform from the platform's centre's x and the player's z is within half the depth of the platform from the platform's centre's z then the player is within the bounds of the platform and the enemy should attack"

Wrapping up and Additional Resources#

And there you have it! We've successfully set the stage for our platforms to dance and our enemies to attack. Here's what your platformer game should look like now:

Moving Objects

Addtionally if you got stuck you can simply copy the finished code below:

Finished Code

For more detailed information on updating objects in ChromeEngine, you can visit Updating Objects in our documentation.

Remember, the magic of game development is all about experimentation, so don't be afraid to mix it up and make this game truly your own. Now go ahead, unleash your imagination and let your game objects bust a move!

- + \ No newline at end of file diff --git a/docs/tutorials/Platformer Tutorial/The Player/index.html b/docs/tutorials/Platformer Tutorial/The Player/index.html index 6c522fd..b8f0abb 100644 --- a/docs/tutorials/Platformer Tutorial/The Player/index.html +++ b/docs/tutorials/Platformer Tutorial/The Player/index.html @@ -6,7 +6,7 @@ The Player | ChromeEngine Documentation - + @@ -21,7 +21,7 @@ materials.setSfx \(material [Yellow] sound effect label [Concrete Step]\) :: custom

For more info see here

Wrapping up and Additional Resources#

That's all for the "Player" section of our platformer tutorial! But we're not done yet, there's still a lot more to do to make our platformer game more interactive and fun.

For more detailed information on player and camera logic in ChromeEngine, you can visit Player and Camera Logic in our documentation.

In the next part of this tutorial, we'll be learn how to make objects move. Keep learning, and happy coding!

- + \ No newline at end of file diff --git a/docs/user_docs/Controllers/index.html b/docs/user_docs/Controllers/index.html index e00b4b7..1d437b9 100644 --- a/docs/user_docs/Controllers/index.html +++ b/docs/user_docs/Controllers/index.html @@ -6,7 +6,7 @@ Controllers | ChromeEngine Documentation - + @@ -24,7 +24,7 @@ Controllers.freeLook \(\) :: custom

Allows rotation and movement of the camera freely, with out any connection to the player object. Useful in edit mode.

- + \ No newline at end of file diff --git a/docs/user_docs/GUI/index.html b/docs/user_docs/GUI/index.html index 5130db5..d70ac63 100644 --- a/docs/user_docs/GUI/index.html +++ b/docs/user_docs/GUI/index.html @@ -6,7 +6,7 @@ GUI | ChromeEngine Documentation - + @@ -25,7 +25,7 @@ GUI.scaleOnTouch \( scale factor [] \) :: custom

If the current GUI element is touched by the mouse pointer it scales that element by scale factor.

- + \ No newline at end of file diff --git a/docs/user_docs/Interactions/index.html b/docs/user_docs/Interactions/index.html index 452a232..e4a7a7a 100644 --- a/docs/user_docs/Interactions/index.html +++ b/docs/user_docs/Interactions/index.html @@ -6,7 +6,7 @@ Interactions | ChromeEngine Documentation - + @@ -21,7 +21,7 @@ _x, _y, _z = GameObjects.getPosition \( object name [] label [] \) :: custom
- + \ No newline at end of file diff --git a/docs/user_docs/Intro/index.html b/docs/user_docs/Intro/index.html index 99da6c2..d1b8274 100644 --- a/docs/user_docs/Intro/index.html +++ b/docs/user_docs/Intro/index.html @@ -6,13 +6,13 @@ Intro | ChromeEngine Documentation - +

Intro

This part of the website is dedicated to documenting completely every user side custom block which Chrome Engine provides developers.

It aims to be concise and comprehensive.

- + \ No newline at end of file diff --git a/docs/user_docs/Materials/index.html b/docs/user_docs/Materials/index.html index 70149f8..cd2f0bf 100644 --- a/docs/user_docs/Materials/index.html +++ b/docs/user_docs/Materials/index.html @@ -6,7 +6,7 @@ Material Creation | ChromeEngine Documentation - + @@ -33,7 +33,7 @@ Materials.setTexture\( material [] texture costume name []\) :: custom

Sets the texture property of the material. The texture costume name should be the costume name of a texture in the sprite render. If specified ChromeEngine will use a texture for this primitive. You can use textured materials on 3D Points which will be shown as billboards but you can also have proper textured polygon primitives but only if the costumes were created using the Texture Converter tool. This is powered by STTF and you should not use too many textures (max 20) as they use 100MB of ram per texture.

- + \ No newline at end of file diff --git a/docs/user_docs/Modelling/index.html b/docs/user_docs/Modelling/index.html index f4f0d99..c8b8b49 100644 --- a/docs/user_docs/Modelling/index.html +++ b/docs/user_docs/Modelling/index.html @@ -6,7 +6,7 @@ GameObject Creation | ChromeEngine Documentation - + @@ -45,7 +45,7 @@ GameObjects.offsetDynamicCenter \( object name [] offset [] [] []\) :: custom

Dynamic Objects are sorted in the scene as if they were a single point. This point used for sorting is by default the centre of mass, but you can use this function to offset it by a fixed xyz vector. This gives more control over how dynamic objects are sorted.

- + \ No newline at end of file diff --git a/docs/user_docs/Settings/index.html b/docs/user_docs/Settings/index.html index d80bfb6..75e977c 100644 --- a/docs/user_docs/Settings/index.html +++ b/docs/user_docs/Settings/index.html @@ -6,7 +6,7 @@ Settings | ChromeEngine Documentation - + @@ -121,7 +121,7 @@ set [@coplanar_thresh v] to (0.023)

@coplanar_thresh: Sets the tolerance for considering two planes as coplanar in the BSP tree. Lower values mean that planes have to be very similar to be considered coplanar.

- + \ No newline at end of file diff --git a/docs/user_docs/Updating Objects/index.html b/docs/user_docs/Updating Objects/index.html index 8ca80c1..65822a9 100644 --- a/docs/user_docs/Updating Objects/index.html +++ b/docs/user_docs/Updating Objects/index.html @@ -6,7 +6,7 @@ Updating Scene | ChromeEngine Documentation - + @@ -45,7 +45,7 @@ Materials.setTexture \( material name [] texture costume name/# []\) :: custom

Sets the texture costume of the material with name material name to the texture costume name/#. If a number is provided the costume # will be used to select the costume, otherwise the costume name will be used.

- + \ No newline at end of file diff --git a/index.html b/index.html index 050e1ea..61109b1 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,13 @@ ChromeEngine Documentation | ChromeEngine Documentation - +

ChromeEngine Documentation

Learn how to use and extend Scratch's most powerful 3D game engine

Platformer Tutorial - 45 mins

Feature-Rich

ChromeEngine comes loaded with a wide array of features to help you create impressive 3D games.

Make Games Fast

With its user-friendly code, ChromeEngine makes 3D game development in Scratch a breeze.

Easy To Edit

Because ChromeEngine is built with Scratch, you can easily edit and modify both your game and the 3D engines code.

- + \ No newline at end of file