Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
new: Merge modules+worldInjection into a single file. Write their text
Browse files Browse the repository at this point in the history
heysokam committed Feb 6, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 471712d commit 4b12554
Showing 4 changed files with 73 additions and 15 deletions.
63 changes: 63 additions & 0 deletions docs/developer/typescript/01_gettingStarted/01_hello/02_engine.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
sidebar_label: The Engine
---
import { TechnicalNote } from '@site/src/components/TechnicalNote';

# Programming with Ethereal Engine
We need to do two very important things in order to use Ethereal Engine for our project:
- We need to import Ethereal Engine's modules
- We need to export our code so the engine can load our project

## Module Imports
In this minimal tutorial we are adding a sphere primitive to the scene.
As this sphere will be a `Spatial` object, we will import a few components from the Spatial engine module:

```ts title="ee-tutorial-hello/src/Hello.ts"
import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
```
We will be adding these Components to our Entity, and Components are part of the ECS pattern.
As such, we will need to use the Ethereal Engine ECS management functions.
The engine provides a convenient way to import all ECS related functions at once through `ECS` [namespace](https://www.typescriptlang.org/docs/handbook/namespaces.html).
```ts title="ee-tutorial-hello/src/Hello.ts"
import { ECS } from '@etherealengine/ecs'
```
## World Injection
The `worldInjection` function is run for all projects when they are first loaded.
It allows projects to run custom logic that will be run across all scenes and routes on any instance of Ethereal Engine.

```ts title="ee-tutorial-hello/src/Hello.ts"
export default async function worldInjection() {
// ... our code ...
}
```
We don't need to know much more about this function for now. We will explore it further in the upcoming tutorials.

<TechnicalNote>
All projects must contain a configuration file named `xrengine.config.ts`.
One of its options is the `worldInjection` function, which will be called directly when the engine loads the project.
There are [multiple other options](https://github.com/EtherealEngine/etherealengine/blob/dev/packages/projects/ProjectConfigInterface.ts#L29) that can be configured from that file, but the worldInjection function is the most relevant to this guide.

This is how our `xrengine.config.ts` file looks like at the moment:
```ts title="ee-tutorial-hello/xrengine.config.ts" showLineNumbers
import type { ProjectConfigInterface } from '@etherealengine/projects/ProjectConfigInterface'

const config: ProjectConfigInterface = {
onEvent: undefined,
thumbnail: '/static/etherealengine_thumbnail.jpg',
routes: {},
services: undefined,
databaseSeed: undefined,
// highlight-start
worldInjection: () => import('./src/Hello')
// highlight-end
}

export default config
```
We will explore how this file works in more detail in the upcoming tutorials.

</TechnicalNote>

This file was deleted.

This file was deleted.

10 changes: 10 additions & 0 deletions docs/developer/typescript/01_gettingStarted/03_next.md
Original file line number Diff line number Diff line change
@@ -8,3 +8,13 @@ NOTE: This page should contain:
<!-- _This guide will teach you how to get started programming with Ethereal Engine using Typescript._ -->
<!-- TODO: Add intro text as a mdx partial, instead of linking to the other page -->


<!--
TODO: Technical Explanation about xrengine.config.ts
Sketch:
As you can see, we are declaring a function that will `import` our `./src/Hello.ts` file.
The engine will call this function when our project is loaded, and our file is declaring an `export default async function`.
Loading the configuration file will call its `worldInjection` function, which will in turn import our file,
and therefore let the engine know about the `worldInjection` function that we have declared in our code.
-->

0 comments on commit 4b12554

Please sign in to comment.