@dcl/sdk 7.0.0-3277074139.commit-6059d49 → 7.0.0-3283072736.commit-63c5d6a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/playground/snippets/ui.tsx +103 -12
- package/package.json +4 -4
|
@@ -6,32 +6,123 @@ import ReactEcs, {
|
|
|
6
6
|
YGJustify
|
|
7
7
|
} from '@dcl/react-ecs'
|
|
8
8
|
|
|
9
|
+
let counter = 0
|
|
10
|
+
|
|
9
11
|
export const uiComponent = () => (
|
|
10
12
|
<UiEntity
|
|
11
13
|
uiTransform={{
|
|
12
|
-
width:
|
|
13
|
-
height:
|
|
14
|
-
|
|
14
|
+
width: 700,
|
|
15
|
+
height: 400,
|
|
16
|
+
margin: { top: '35px', left: '500px' }
|
|
15
17
|
}}
|
|
16
|
-
uiBackground={{ backgroundColor:
|
|
18
|
+
uiBackground={{ backgroundColor: Color4.create(0.5, 0.8, 0.1, 0.6) }}
|
|
17
19
|
>
|
|
18
20
|
<UiEntity
|
|
19
21
|
uiTransform={{
|
|
20
|
-
width: 100,
|
|
21
|
-
height:
|
|
22
|
-
display: YGDisplay.YGD_FLEX,
|
|
22
|
+
width: '100%',
|
|
23
|
+
height: '20%',
|
|
23
24
|
justifyContent: YGJustify.YGJ_CENTER,
|
|
24
|
-
alignItems: YGAlign.YGA_CENTER
|
|
25
|
+
alignItems: YGAlign.YGA_CENTER,
|
|
26
|
+
display: YGDisplay.YGD_FLEX
|
|
25
27
|
}}
|
|
26
|
-
uiBackground={{ backgroundColor: { r: 255, g: 45, b: 85, a: 0.2 } }}
|
|
27
28
|
>
|
|
28
29
|
<UiEntity
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
uiText={{ value: 'SDK 7', fontSize: 80 }}
|
|
31
|
+
uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
|
|
32
|
+
/>
|
|
33
|
+
</UiEntity>
|
|
34
|
+
<UiEntity
|
|
35
|
+
uiTransform={{
|
|
36
|
+
width: '100%',
|
|
37
|
+
height: '20%',
|
|
38
|
+
justifyContent: YGJustify.YGJ_CENTER,
|
|
39
|
+
alignItems: YGAlign.YGA_CENTER,
|
|
40
|
+
display: YGDisplay.YGD_FLEX
|
|
41
|
+
}}
|
|
42
|
+
>
|
|
43
|
+
<UiEntity
|
|
44
|
+
uiText={{ value: `Counter: ${counter}`, fontSize: 60 }}
|
|
45
|
+
uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
|
|
46
|
+
/>
|
|
47
|
+
</UiEntity>
|
|
48
|
+
<UiEntity
|
|
49
|
+
uiTransform={{
|
|
50
|
+
width: '100%',
|
|
51
|
+
height: '100px',
|
|
52
|
+
justifyContent: YGJustify.YGJ_CENTER,
|
|
53
|
+
alignItems: YGAlign.YGA_CENTER,
|
|
54
|
+
display: YGDisplay.YGD_FLEX
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
<UiEntity
|
|
58
|
+
uiText={{ value: `Player: ${getPlayerPosition()}`, fontSize: 40 }}
|
|
59
|
+
uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
|
|
32
60
|
/>
|
|
33
61
|
</UiEntity>
|
|
34
62
|
</UiEntity>
|
|
35
63
|
)
|
|
36
64
|
|
|
65
|
+
function getPlayerPosition() {
|
|
66
|
+
const playerPosition = Transform.getOrNull(engine.PlayerEntity)
|
|
67
|
+
if (!playerPosition) return ''
|
|
68
|
+
const { x, y, z } = playerPosition.position
|
|
69
|
+
return `{x: ${x.toFixed(2)}, y: ${y.toFixed(2)}, z: ${z.toFixed(2)} }`
|
|
70
|
+
}
|
|
71
|
+
|
|
37
72
|
renderUi(uiComponent)
|
|
73
|
+
|
|
74
|
+
// Cube factory
|
|
75
|
+
function createCube(x: number, y: number, z: number, spawner = true): Entity {
|
|
76
|
+
const meshEntity = engine.addEntity()
|
|
77
|
+
Transform.create(meshEntity, { position: { x, y, z } })
|
|
78
|
+
MeshRenderer.create(meshEntity, { box: { uvs: [] } })
|
|
79
|
+
MeshCollider.create(meshEntity, { box: {} })
|
|
80
|
+
if (spawner) {
|
|
81
|
+
PointerEvents.create(meshEntity, {
|
|
82
|
+
pointerEvents: [
|
|
83
|
+
{
|
|
84
|
+
eventType: PointerEventType.PET_DOWN,
|
|
85
|
+
eventInfo: {
|
|
86
|
+
button: InputAction.IA_PRIMARY,
|
|
87
|
+
hoverText: 'Press E to spawn',
|
|
88
|
+
maxDistance: 100,
|
|
89
|
+
showFeedback: true
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
})
|
|
94
|
+
}
|
|
95
|
+
return meshEntity
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Systems
|
|
99
|
+
function circularSystem(dt: number) {
|
|
100
|
+
const entitiesWithMeshRenderer = engine.getEntitiesWith(
|
|
101
|
+
MeshRenderer,
|
|
102
|
+
Transform
|
|
103
|
+
)
|
|
104
|
+
for (const [entity, _meshRenderer, _transform] of entitiesWithMeshRenderer) {
|
|
105
|
+
const mutableTransform = Transform.getMutable(entity)
|
|
106
|
+
|
|
107
|
+
mutableTransform.rotation = Quaternion.multiply(
|
|
108
|
+
mutableTransform.rotation,
|
|
109
|
+
Quaternion.fromAngleAxis(dt * 10, Vector3.Up())
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
function spawnerSystem() {
|
|
115
|
+
const clickedCubes = engine.getEntitiesWith(PointerEvents)
|
|
116
|
+
for (const [entity] of clickedCubes) {
|
|
117
|
+
if (wasEntityClicked(entity, InputAction.IA_PRIMARY)) {
|
|
118
|
+
counter++
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Init
|
|
124
|
+
createCube(8, 1, 8)
|
|
125
|
+
engine.addSystem(circularSystem)
|
|
126
|
+
engine.addSystem(spawnerSystem)
|
|
127
|
+
|
|
128
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dcl/sdk",
|
|
3
|
-
"version": "7.0.0-
|
|
3
|
+
"version": "7.0.0-3283072736.commit-63c5d6a",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/src/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"src/cli/**/*.js"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@dcl/amd": "6.11.9-
|
|
31
|
-
"@dcl/build-ecs": "6.11.9-
|
|
30
|
+
"@dcl/amd": "6.11.9-3283072736.commit-63c5d6a",
|
|
31
|
+
"@dcl/build-ecs": "6.11.9-3283072736.commit-63c5d6a",
|
|
32
32
|
"@dcl/kernel": "1.0.0-2994874542.commit-c3ae489",
|
|
33
33
|
"@dcl/posix": "^1.0.4",
|
|
34
34
|
"@dcl/schemas": "4.8.0",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"ignore": "^5.1.8"
|
|
39
39
|
},
|
|
40
40
|
"minCliVersion": "3.10.2",
|
|
41
|
-
"commit": "
|
|
41
|
+
"commit": "63c5d6ab6218f4d9f4cdda346e97b4d62421e789"
|
|
42
42
|
}
|