gaesup-world 0.0.783 → 0.1.1
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/README.md +226 -132
- package/dist/gaesup/animation/actions.d.ts +7 -4
- package/dist/gaesup/animation/actions.js +77 -75
- package/dist/gaesup/camera/control/normal.js +1 -1
- package/dist/gaesup/component/active/airplane/index.js +3 -4
- package/dist/gaesup/component/active/common/InnerGroupRef.js +5 -2
- package/dist/gaesup/component/active/common/RiderGroupRef.d.ts +7 -0
- package/dist/gaesup/component/active/common/RiderGroupRef.js +32 -0
- package/dist/gaesup/component/active/vehicle/index.js +3 -4
- package/dist/gaesup/component/index.js +1 -1
- package/dist/gaesup/component/passive/airplane/index.js +7 -7
- package/dist/gaesup/component/passive/airplane/type.d.ts +2 -0
- package/dist/gaesup/component/passive/common/RigidbodyRef.d.ts +2 -1
- package/dist/gaesup/component/passive/common/RigidbodyRef.js +3 -3
- package/dist/gaesup/component/passive/vehicle/index.js +7 -2
- package/dist/gaesup/component/passive/vehicle/type.d.ts +2 -0
- package/dist/gaesup/controller/index.d.ts +1 -0
- package/dist/gaesup/controller/index.js +7 -1
- package/dist/gaesup/controller/initialize/callback/index.js +3 -5
- package/dist/gaesup/controller/initialize/callback/type.d.ts +2 -1
- package/dist/gaesup/gaesupProps/index.d.ts +2 -1
- package/dist/gaesup/gaesupProps/index.js +7 -3
- package/dist/gaesup/hooks/useGaesupAnimation/index.d.ts +8 -0
- package/dist/gaesup/hooks/useGaesupAnimation/index.js +94 -0
- package/dist/gaesup/hooks/useRideable/index.d.ts +28 -0
- package/dist/gaesup/hooks/useRideable/index.js +198 -0
- package/dist/gaesup/hooks/useTeleport/index.d.ts +3 -0
- package/dist/gaesup/hooks/useTeleport/index.js +12 -0
- package/dist/gaesup/physics/airplane/direction.js +0 -1
- package/dist/gaesup/physics/airplane/index.js +2 -0
- package/dist/gaesup/physics/airplane/landing.d.ts +2 -0
- package/dist/gaesup/physics/airplane/landing.js +29 -0
- package/dist/gaesup/physics/check/index.js +4 -0
- package/dist/gaesup/physics/check/push.d.ts +2 -0
- package/dist/gaesup/physics/check/push.js +6 -0
- package/dist/gaesup/physics/check/riding.d.ts +2 -0
- package/dist/gaesup/physics/check/riding.js +7 -0
- package/dist/gaesup/physics/index.js +1 -1
- package/dist/gaesup/physics/vehicle/direction.js +0 -6
- package/dist/gaesup/physics/vehicle/index.js +2 -0
- package/dist/gaesup/physics/vehicle/landing.d.ts +2 -0
- package/dist/gaesup/physics/vehicle/landing.js +29 -0
- package/dist/gaesup/tools/jumpPortal/index.d.ts +1 -1
- package/dist/gaesup/tools/jumpPortal/index.js +6 -7
- package/dist/gaesup/tools/keyBoardToolTip/type.d.ts +2 -0
- package/dist/gaesup/tools/miniMap/index.js +22 -8
- package/dist/gaesup/tools/miniMap/type.d.ts +4 -1
- package/dist/gaesup/tools/rideable/index.d.ts +2 -8
- package/dist/gaesup/tools/rideable/index.js +37 -72
- package/dist/gaesup/tools/zoomButton/index.d.ts +7 -0
- package/dist/gaesup/tools/zoomButton/index.js +37 -13
- package/dist/gaesup/world/context/index.js +16 -12
- package/dist/gaesup/world/context/reducer.d.ts +3 -1
- package/dist/gaesup/world/context/type.d.ts +30 -5
- package/dist/gaesup/world/debug/index.js +1 -23
- package/dist/gaesup/world/initalize/index.d.ts +3 -1
- package/dist/gaesup/world/initalize/index.js +1 -1
- package/package.json +6 -5
- package/dist/gaesup/component/passive/vehicle/collider.d.ts +0 -6
- package/dist/gaesup/component/passive/vehicle/collider.js +0 -7
package/README.md
CHANGED
|
@@ -109,13 +109,19 @@ This project is distributed under the MIT License.
|
|
|
109
109
|
|
|
110
110
|
---
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
### Index
|
|
113
113
|
|
|
114
|
-
|
|
114
|
+
- Player Type
|
|
115
115
|
|
|
116
|
-
-
|
|
117
|
-
-
|
|
118
|
-
-
|
|
116
|
+
- Character
|
|
117
|
+
- Vehicle
|
|
118
|
+
- Airplane
|
|
119
|
+
|
|
120
|
+
- Animation
|
|
121
|
+
|
|
122
|
+
## Player Type
|
|
123
|
+
|
|
124
|
+
---
|
|
119
125
|
|
|
120
126
|
## Character
|
|
121
127
|
|
|
@@ -123,11 +129,10 @@ This is the character control in Gaesup World.
|
|
|
123
129
|
|
|
124
130
|
- Possible Camera Types
|
|
125
131
|
|
|
126
|
-
| Name |
|
|
127
|
-
| ------ |
|
|
128
|
-
| Normal |
|
|
129
|
-
| Orbit |
|
|
130
|
-
| Map | Orthographic Camera | Map Control | A top-down control view. |
|
|
132
|
+
| Name | Control | Info |
|
|
133
|
+
| ------ | ------------- | --------------------------------------------------------------------------------------------- |
|
|
134
|
+
| Normal | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
|
|
135
|
+
| Orbit | Orbit Control | Moves with the character and rotates according to the character's direction. |
|
|
131
136
|
|
|
132
137
|
- Controller Tools
|
|
133
138
|
|
|
@@ -141,13 +146,11 @@ This is the character control in Gaesup World.
|
|
|
141
146
|
|
|
142
147
|
This is the vehicle control in Gaesup World. Characters can board the vehicle.
|
|
143
148
|
|
|
144
|
-
- Possible Camera Types
|
|
149
|
+
- Possible Camera Types (only orbit type available)
|
|
145
150
|
|
|
146
|
-
| Name
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
| Orbit | Perspective Camera | Orbit Control | Moves with the character and rotates according to the character's direction. |
|
|
150
|
-
| Map | Orthographic Camera | Map Control | A top-down control view. |
|
|
151
|
+
| Name | Control | Info |
|
|
152
|
+
| ----- | ------------- | ---------------------------------------------------------------------------- |
|
|
153
|
+
| Orbit | Orbit Control | Moves with the character and rotates according to the character's direction. |
|
|
151
154
|
|
|
152
155
|
- Controller Tools
|
|
153
156
|
|
|
@@ -161,13 +164,11 @@ This is the vehicle control in Gaesup World. Characters can board the vehicle.
|
|
|
161
164
|
|
|
162
165
|
This is the airplane control in Gaesup World. Characters can board the airplane.
|
|
163
166
|
|
|
164
|
-
- Possible Camera Types
|
|
167
|
+
- Possible Camera Types (only orbit type available)
|
|
165
168
|
|
|
166
|
-
| Name
|
|
167
|
-
|
|
|
168
|
-
|
|
|
169
|
-
| Orbit | Perspective Camera | Orbit Control | Moves with the character and rotates according to the character's direction. |
|
|
170
|
-
| Map | Orthographic Camera | Map Control | A top-down control view. |
|
|
169
|
+
| Name | Control | Info |
|
|
170
|
+
| ----- | ------------- | ---------------------------------------------------------------------------- |
|
|
171
|
+
| Orbit | Orbit Control | Moves with the character and rotates according to the character's direction. |
|
|
171
172
|
|
|
172
173
|
- Controller Tools
|
|
173
174
|
|
|
@@ -179,11 +180,115 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
|
|
|
179
180
|
|
|
180
181
|
---
|
|
181
182
|
|
|
183
|
+
# Animation
|
|
184
|
+
|
|
185
|
+
- Animation refers to the method of controlling animations for characters and other elements in the Gaesup World.
|
|
186
|
+
|
|
187
|
+
# Rideable
|
|
188
|
+
|
|
189
|
+
- Rideable objects are objects that can be ridden. They detect collisions and allow the character to board when contact is made. Currently, two types of objects, 'vehicle' and 'airplane', can be ridden.
|
|
190
|
+
|
|
191
|
+

|
|
192
|
+
|
|
193
|
+
### (1) Example
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
export default function App() {
|
|
197
|
+
// Define URLs
|
|
198
|
+
const CHARACTER_URL = S3 + "/gaesup.glb";
|
|
199
|
+
const AIRPLANE_URL = S3 + "/air.glb";
|
|
200
|
+
const VEHICLE_URL = S3 + "/kart.glb";
|
|
201
|
+
const WHEEL_URL = S3 + "/wheel.glb";
|
|
202
|
+
|
|
203
|
+
return (
|
|
204
|
+
<GaesupWorld
|
|
205
|
+
// ...props defined here
|
|
206
|
+
>
|
|
207
|
+
<Canvas
|
|
208
|
+
// ...props defined here
|
|
209
|
+
>
|
|
210
|
+
<Physics>
|
|
211
|
+
<GaesupController />
|
|
212
|
+
|
|
213
|
+
{/* Import Rideable component inside and pass the arguments as shown below */}
|
|
214
|
+
<Rideable
|
|
215
|
+
objectkey="1"
|
|
216
|
+
objectType="vehicle"
|
|
217
|
+
isRiderOn={true}
|
|
218
|
+
url={VEHICLE_URL}
|
|
219
|
+
wheelUrl={WHEEL_URL}
|
|
220
|
+
offset={V3(0, 0.5, 0)}
|
|
221
|
+
position={V3(-10, 5, 10)}
|
|
222
|
+
/>
|
|
223
|
+
<Rideable
|
|
224
|
+
objectkey="2"
|
|
225
|
+
objectType="vehicle"
|
|
226
|
+
isRiderOn={false}
|
|
227
|
+
url={VEHICLE_URL}
|
|
228
|
+
wheelUrl={WHEEL_URL}
|
|
229
|
+
position={V3(-20, 5, 10)}
|
|
230
|
+
/>
|
|
231
|
+
<Rideable
|
|
232
|
+
objectkey="3"
|
|
233
|
+
objectType="airplane"
|
|
234
|
+
isRiderOn={true}
|
|
235
|
+
url={AIRPLANE_URL}
|
|
236
|
+
offset={V3(0, 0.5, 0)}
|
|
237
|
+
position={V3(10, 5, 10)}
|
|
238
|
+
/>
|
|
239
|
+
<Rideable
|
|
240
|
+
objectkey="4"
|
|
241
|
+
objectType="airplane"
|
|
242
|
+
isRiderOn={false}
|
|
243
|
+
url={AIRPLANE_URL}
|
|
244
|
+
position={V3(20, 5, 10)}
|
|
245
|
+
/>
|
|
246
|
+
</Physics>
|
|
247
|
+
</Canvas>
|
|
248
|
+
</GaesupWorld>
|
|
249
|
+
);
|
|
250
|
+
}
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### 2) Precautions
|
|
254
|
+
|
|
255
|
+
- The `objectkey` must be unique.
|
|
256
|
+
|
|
257
|
+
### 3) Props
|
|
258
|
+
|
|
259
|
+
| Prop Name | Type | Required | Description | Default Value |
|
|
260
|
+
| -------------- | ----------------------- | -------- | ----------------------------------------------- | -------------- |
|
|
261
|
+
| `objectkey` | string | Required | Unique identifier for the rideable object | None |
|
|
262
|
+
| `objectType` | "vehicle" or "airplane" | Optional | Type of the rideable object | `undefined` |
|
|
263
|
+
| `isRiderOn` | boolean | Optional | Whether a rider is on the rideable object | `false` |
|
|
264
|
+
| `url` | string | Optional | 3D model URL for the rideable object | `null` |
|
|
265
|
+
| `wheelUrl` | string | Optional | Wheel model URL for "vehicle" type rideables | `null` |
|
|
266
|
+
| `position` | THREE.Vector3 | Optional | Initial position of the rideable object | `(0, 0, 0)` |
|
|
267
|
+
| `rotation` | THREE.Euler | Optional | Initial rotation angle of the rideable object | `(0, 0, 0)` |
|
|
268
|
+
| `offset` | THREE.Vector3 | Optional | Initial position offset for the rideable object | `(0, 0, 0)` |
|
|
269
|
+
| `visible` | boolean | Optional | Visibility of the rideable object | `true` |
|
|
270
|
+
| `vehicleSize` | THREE.Vector3 | Optional | Size of the "vehicle" type rideable object | Rapier default |
|
|
271
|
+
| `wheelSize` | THREE.Vector3 | Optional | Size of the wheel for "vehicle" type rideables | Rapier default |
|
|
272
|
+
| `airplaneSize` | THREE.Vector3 | Optional | Size of the "airplane" type rideable object | Rapier default |
|
|
273
|
+
|
|
274
|
+
### 4) Features
|
|
275
|
+
|
|
276
|
+
1. **Support for Various Rideable Objects:** The Rideable component can render a variety of rideable objects, including "vehicle" and "airplane" types. It can render the 3D models of each object and allow interactions with them.
|
|
277
|
+
2. **Customizable Properties:** You can easily configure the initial state, size, model URLs, visibility, and more of rideable objects using component properties.
|
|
278
|
+
3. **Interaction with Riders:** The Rideable component supports interactions required for a rider to board and move with rideable objects.
|
|
279
|
+
|
|
280
|
+
### Advantages:
|
|
281
|
+
|
|
282
|
+
1. **Modularity and Reusability:** The Rideable component is modular and can be easily integrated with other components, increasing code reusability and facilitating maintenance.
|
|
283
|
+
2. **Rapid Development:** By using the `useRideable` hook, which manages the physics engine and rideable object management, developers can quickly implement and render rideable objects, reducing development time.
|
|
284
|
+
3. **Real-time Interaction:** Leveraging the Rapier physics engine allows for real-time handling of rideable object movements and collision checks, providing a high level of interaction in games or simulations.
|
|
285
|
+
4. **Flexible Customization:** You can customize the appearance and behavior of each rideable object using properties, making it suitable for various game or simulation environments.
|
|
286
|
+
|
|
182
287
|
# Tools
|
|
183
288
|
|
|
184
289
|
- 개숲월드에서 캐릭터 컨트롤을 도와주는 다양한 도구들입니다.
|
|
185
290
|
|
|
186
|
-
#### 1) [joystick](#
|
|
291
|
+
#### 1) [joystick](#1. joyStick)
|
|
187
292
|
|
|
188
293
|
#### 2) [keyboardtooltip](#keyBoardTooltip)
|
|
189
294
|
|
|
@@ -191,74 +296,67 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
|
|
|
191
296
|
|
|
192
297
|
#### [gameboy](#gameboy)
|
|
193
298
|
|
|
194
|
-
## 1
|
|
195
|
-
|
|
196
|
-
### (1) Info
|
|
197
|
-
|
|
198
|
-
- 가상 조이스틱 인터페이스를 제공하는 컴포넌트입니다. 모바일 환경에서 사용을 권장합니다
|
|
199
|
-
|
|
200
|
-
> 주의! 모바일에서 위치의 흔들림 때문에 `GaesupWorld` 의 옵션 `scrollBlock` 의 사용을 권장합니다.
|
|
201
|
-
|
|
202
|
-
### (2) 특징
|
|
299
|
+
## 1. JoyStick
|
|
203
300
|
|
|
204
|
-
-
|
|
205
|
-
- **커스텀 외관**: 조이스틱과 그 공의 스타일링을 위한 `joyStickBallStyle` 및 `joyStickStyle` 속성을 받습니다.
|
|
206
|
-
- **반응형 및 상호작용**: 다양한 장치에 대응하기 위한 마우스, 모바일 터치 이벤트를 지원합니다.
|
|
301
|
+
The JoyStick component provides a virtual joystick interface, primarily intended for mobile environments. This component allows you to simulate joystick-like input on mobile devices. Additionally, you can prevent position jitter, which can occur on mobile devices, by using the `scrollBlock` option in the `GaesupWorld` component.
|
|
207
302
|
|
|
208
|
-
###
|
|
303
|
+
### Key Features:
|
|
209
304
|
|
|
210
|
-
-
|
|
211
|
-
-
|
|
305
|
+
- **Joystick Interface:** Provides a joystick-like user input interface, suitable for mobile devices.
|
|
306
|
+
- **Customization:** You can customize the style of the JoyStick component by adjusting the styles of the joystick and the joystick ball using the `joyStickBallStyle` and `joyStickStyle` properties.
|
|
307
|
+
- **Responsive and Interactive:** It supports various input devices and responds to both mouse and mobile touch events for controlling movement.
|
|
212
308
|
|
|
213
|
-
###
|
|
309
|
+
### Props:
|
|
214
310
|
|
|
215
|
-
|
|
216
|
-
2. 컴포넌트는 마우스 및 터치 입력에 반응하여 이동을 제어합니다.
|
|
217
|
-
3. (선택) `joyStickBallStyle` 및 `joyStickStyle`을 통해 필요한 스타일을 커스텀합니다
|
|
311
|
+
- `joyStickBallStyle`: Style of the joystick ball.
|
|
218
312
|
|
|
219
313
|
### (5) Example
|
|
220
314
|
|
|
221
315
|
```jsx
|
|
222
316
|
const MyComponent = () => {
|
|
223
|
-
// 커스텀 스타일 정의
|
|
224
317
|
const joyStickStyle = {
|
|
225
|
-
/*
|
|
318
|
+
/* joyStickStyle */
|
|
226
319
|
};
|
|
227
320
|
const joyStickBallStyle = {
|
|
228
|
-
/*
|
|
321
|
+
/* joyStickBallStyle */
|
|
229
322
|
};
|
|
230
323
|
|
|
231
324
|
return (
|
|
232
|
-
<
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
325
|
+
<GaesupWorld>
|
|
326
|
+
{/* ... */}
|
|
327
|
+
<JoyStick
|
|
328
|
+
joyStickStyle={joyStickStyle}
|
|
329
|
+
joyStickBallStyle={joyStickBallStyle}
|
|
330
|
+
/>
|
|
331
|
+
{/* ... */}
|
|
332
|
+
</GaesupWorld>
|
|
236
333
|
);
|
|
237
334
|
};
|
|
238
335
|
```
|
|
239
336
|
|
|
240
|
-
##
|
|
337
|
+
##
|
|
241
338
|
|
|
242
|
-
|
|
339
|
+
## 2. KeyBoardToolTip (키보드 툴팁)
|
|
243
340
|
|
|
244
|
-
|
|
341
|
+
The KeyBoardToolTip component is designed to visually represent a keyboard controller interface, providing a visual representation of each key and its associated action.
|
|
245
342
|
|
|
246
|
-
###
|
|
343
|
+
### Key Features:
|
|
247
344
|
|
|
248
|
-
-
|
|
249
|
-
-
|
|
250
|
-
-
|
|
345
|
+
- **Visualizing Keyboard Keys:** Visualizes all keyboard keys in an array format.
|
|
346
|
+
- **State Animation:** Reflects the currently active keys and their associated actions by displaying them differently to provide user feedback.
|
|
347
|
+
- **Custom Styling:** Provides various styling properties for customizing key caps' appearance.
|
|
251
348
|
|
|
252
|
-
###
|
|
349
|
+
### How to Use:
|
|
253
350
|
|
|
254
|
-
1. `KeyBoardToolTip`
|
|
255
|
-
2.
|
|
256
|
-
3.
|
|
257
|
-
4. (
|
|
351
|
+
1. Include the `KeyBoardToolTip` component within the `GaesupWorld` component.
|
|
352
|
+
2. Define the `control` mode as "keyboard" in the `mode` property.
|
|
353
|
+
3. The component visualizes each keyboard key based on the `KeyBoardAll` constant and applies different styles for currently active keys.
|
|
354
|
+
4. (Optional) Customize the styles using the `keyBoardToolTipInnerStyle`, `selectedKeyCapStyle`, `notSelectedkeyCapStyle`, and `keyCapStyle` properties.
|
|
258
355
|
|
|
259
|
-
###
|
|
356
|
+
### Example:
|
|
260
357
|
|
|
261
|
-
```
|
|
358
|
+
```
|
|
359
|
+
jsxCopy code
|
|
262
360
|
import { KeyBoardToolTip } from "./KeyBoardToolTip";
|
|
263
361
|
import { GaesupWorldContext } from "../../world/context";
|
|
264
362
|
|
|
@@ -291,28 +389,26 @@ const MyComponent = () => {
|
|
|
291
389
|
};
|
|
292
390
|
```
|
|
293
391
|
|
|
294
|
-
## 3
|
|
392
|
+
## 3. MiniMap
|
|
295
393
|
|
|
296
|
-
|
|
394
|
+
The MiniMap component is used to display a small map of the user's location and the surrounding environment within a 3D world.
|
|
297
395
|
|
|
298
|
-
|
|
396
|
+
### Key Features:
|
|
299
397
|
|
|
300
|
-
|
|
398
|
+
- **Dynamic Scaling:** Allows users to dynamically adjust the size of the map.
|
|
399
|
+
- **Direction Indicators:** Visualizes directions such as East, West, South, and North.
|
|
400
|
+
- **Custom Styling:** Allows customization of the MiniMap and its internal elements.
|
|
401
|
+
- **Mouse Wheel Support:** Supports adjusting the map's scale using the mouse wheel.
|
|
301
402
|
|
|
302
|
-
|
|
303
|
-
- **방향 표시**: 동(East), 서(West), 남(South), 북(North) 방향을 시각적으로 표시합니다.
|
|
304
|
-
- **커스텀 스타일링**: 미니맵 및 그 내부 요소들의 스타일을 사용자 정의할 수 있습니다.
|
|
305
|
-
- **마우스 휠 지원**: 마우스 휠을 사용하여 미니맵의 스케일을 조절할 수 있습니다.
|
|
403
|
+
### How to Use:
|
|
306
404
|
|
|
307
|
-
|
|
405
|
+
1. Include the `MiniMap` component within your component tree.
|
|
406
|
+
2. Customize the appearance using the `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, and `plusMinusStyle` properties as needed.
|
|
407
|
+
3. The component updates the MiniMap based on the user's current position and direction.
|
|
308
408
|
|
|
309
|
-
|
|
310
|
-
2. 필요한 스타일을 `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, `plusMinusStyle` 속성을 통해 전달합니다.
|
|
311
|
-
3. 컴포넌트는 현재 사용자의 위치와 방향에 따라 미니맵을 업데이트합니다.
|
|
409
|
+
### Example:
|
|
312
410
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
```jsx
|
|
411
|
+
```tsx
|
|
316
412
|
import { MiniMap } from "./MiniMap";
|
|
317
413
|
|
|
318
414
|
const MyComponent = () => {
|
|
@@ -322,7 +418,7 @@ const MyComponent = () => {
|
|
|
322
418
|
const innerStyle = {
|
|
323
419
|
/* ... */
|
|
324
420
|
};
|
|
325
|
-
//
|
|
421
|
+
// Define other style properties as needed
|
|
326
422
|
|
|
327
423
|
return (
|
|
328
424
|
<GaesupWorld>
|
|
@@ -330,7 +426,7 @@ const MyComponent = () => {
|
|
|
330
426
|
<MiniMap
|
|
331
427
|
minimapStyle={minimapStyle}
|
|
332
428
|
innerStyle={innerStyle}
|
|
333
|
-
//
|
|
429
|
+
// Pass other style properties as needed
|
|
334
430
|
/>
|
|
335
431
|
{/* ... */}
|
|
336
432
|
</GaesupWorld>
|
|
@@ -338,34 +434,32 @@ const MyComponent = () => {
|
|
|
338
434
|
};
|
|
339
435
|
```
|
|
340
436
|
|
|
341
|
-
## GameBoy
|
|
342
|
-
|
|
343
|
-
## 개요
|
|
437
|
+
## 4. GameBoy
|
|
344
438
|
|
|
345
|
-
- GameBoy
|
|
439
|
+
- The GameBoy component is a controller interface that emulates GameBoy-like directional buttons. It is primarily intended for mobile usage.
|
|
346
440
|
|
|
347
|
-
|
|
441
|
+
### Key Features:
|
|
348
442
|
|
|
349
|
-
-
|
|
350
|
-
-
|
|
351
|
-
-
|
|
443
|
+
- **Direction Buttons:** Implements buttons for directional input (forward, backward, left, right) based on the `GameBoyDirections` array.
|
|
444
|
+
- **Context-aware Rendering:** Renders the component based on the `mode.controller` value from the `GaesupWorldContext`.
|
|
445
|
+
- **Custom Styling:** Provides `gameboyStyle` and `gameboyButtonStyle` properties for styling customization.
|
|
352
446
|
|
|
353
|
-
|
|
447
|
+
### How to Use:
|
|
354
448
|
|
|
355
|
-
`GameBoy`
|
|
449
|
+
To use the `GameBoy` component:
|
|
356
450
|
|
|
357
|
-
1.
|
|
358
|
-
2.
|
|
359
|
-
3.
|
|
451
|
+
1. Place the `GameBoy` component within your component tree.
|
|
452
|
+
2. Customize the appearance by defining styles in the `gameboyStyle` and `gameboyButtonStyle` properties.
|
|
453
|
+
3. The component renders buttons based on the `GameBoyDirections` array.
|
|
360
454
|
|
|
361
|
-
|
|
455
|
+
### Example:
|
|
362
456
|
|
|
363
|
-
```
|
|
457
|
+
```tsx
|
|
364
458
|
import { GameBoy } from "./GameBoy";
|
|
365
459
|
import { GaesupWorldContext } from "../../world/context";
|
|
366
460
|
|
|
367
461
|
const MyComponent = () => {
|
|
368
|
-
//
|
|
462
|
+
// Define custom styles
|
|
369
463
|
const gameboyStyle = {
|
|
370
464
|
/* ... */
|
|
371
465
|
};
|
|
@@ -382,42 +476,41 @@ const MyComponent = () => {
|
|
|
382
476
|
};
|
|
383
477
|
```
|
|
384
478
|
|
|
385
|
-
## GamePad
|
|
479
|
+
## 5. GamePad
|
|
386
480
|
|
|
387
|
-
|
|
481
|
+
- The GamePad component provides a customizable controller interface that supports various controller modes, such as joysticks and GameBoys, making it versatile for different input scenarios.
|
|
388
482
|
|
|
389
|
-
|
|
483
|
+
### Key Features:
|
|
390
484
|
|
|
391
|
-
|
|
485
|
+
- **Dynamic Button Rendering:** Dynamically generates buttons based on the `control` object in the `GaesupWorldContext`.
|
|
486
|
+
- **Universal Usage:** Compatible with various controller modes like joysticks and GameBoys.
|
|
487
|
+
- **Custom Styling:** Allows customization of the GamePad's appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
|
|
392
488
|
|
|
393
|
-
|
|
394
|
-
- **범용적 사용**: 조이스틱 및 GameBoy와 같은 다양한 컨트롤러 모드와 호환됩니다.
|
|
395
|
-
- **커스텀 스타일링**: `gamePadStyle` 및 `gamePadButtonStyle` 속성을 통해 커스텀 스타일링 가능.
|
|
489
|
+
### Props:
|
|
396
490
|
|
|
397
|
-
|
|
491
|
+
- `gamePadStyle`: Style of the GamePad container (`React.CSSProperties` object).
|
|
492
|
+
- `gamePadButtonStyle`: Style of individual buttons (`React.CSSProperties` object).
|
|
493
|
+
- `label`: Custom label for the buttons.
|
|
398
494
|
|
|
399
|
-
|
|
400
|
-
- `gamePadButtonStyle`: 개별 버튼의 스타일 (`React.CSSProperties` 객체).
|
|
401
|
-
- `label`: 버튼에 대한 커스텀 라벨.
|
|
495
|
+
### How to Use:
|
|
402
496
|
|
|
403
|
-
|
|
497
|
+
1. Include the `GamePad` component within your component tree.
|
|
498
|
+
2. Customize the appearance using the `gamePadStyle` and `gamePadButtonStyle` properties.
|
|
499
|
+
3. The component dynamically renders buttons based on the `control` mode.
|
|
404
500
|
|
|
405
|
-
|
|
406
|
-
2. `gamePadStyle` 및 `gamePadButtonStyle`을 사용하여 외관을 커스터마이즈합니다.
|
|
407
|
-
3. 컴포넌트는 컨트롤러 모드에 맞춰 적절한 버튼을 렌더링합니다.
|
|
501
|
+
### Example:
|
|
408
502
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
```jsx
|
|
503
|
+
```tsx
|
|
504
|
+
jsxCopy code
|
|
412
505
|
import { GamePad } from "./GamePad";
|
|
413
506
|
import { GaesupWorldContext } from "../../world/context";
|
|
414
507
|
|
|
415
508
|
const MyComponent = () => {
|
|
416
509
|
const gamePadStyle = {
|
|
417
|
-
/*
|
|
510
|
+
/* Define custom styles here */
|
|
418
511
|
};
|
|
419
512
|
const gamePadButtonStyle = {
|
|
420
|
-
/*
|
|
513
|
+
/* Define button styles here */
|
|
421
514
|
};
|
|
422
515
|
|
|
423
516
|
return (
|
|
@@ -429,29 +522,28 @@ const MyComponent = () => {
|
|
|
429
522
|
};
|
|
430
523
|
```
|
|
431
524
|
|
|
432
|
-
## ZoomButton
|
|
433
|
-
|
|
434
|
-
## 개요
|
|
525
|
+
## 6. ZoomButton
|
|
435
526
|
|
|
436
|
-
|
|
527
|
+
The ZoomButton component is used to move the camera to a specific location and control the camera's zoom, primarily used for zooming to a target.
|
|
437
528
|
|
|
438
|
-
|
|
529
|
+
### Key Features:
|
|
439
530
|
|
|
440
|
-
- `position`:
|
|
441
|
-
- `children`: (
|
|
442
|
-
- `target`: (
|
|
443
|
-
- `keepBlocking`: (
|
|
444
|
-
- `zoomButtonStyle`: (
|
|
531
|
+
- `position`: The target position where the camera will move to (`THREE.Vector3` object).
|
|
532
|
+
- `children`: (Optional) React nodes to render within the button.
|
|
533
|
+
- `target`: (Optional) The target position the camera will look at (`THREE.Vector3` object).
|
|
534
|
+
- `keepBlocking`: (Optional) Determines whether to keep the blocking state while the camera is moving.
|
|
535
|
+
- `zoomButtonStyle`: (Optional) Style for the button (`React.CSSProperties` object).
|
|
445
536
|
|
|
446
|
-
|
|
537
|
+
### How to Use:
|
|
447
538
|
|
|
448
|
-
1. `ZoomButton`
|
|
449
|
-
2. `position` prop
|
|
450
|
-
3.
|
|
539
|
+
1. Place the `ZoomButton` component in your component tree at the desired location.
|
|
540
|
+
2. Define the `position` prop to specify the location the camera should move to.
|
|
541
|
+
3. When the button is clicked, the camera will move to the specified position.
|
|
451
542
|
|
|
452
|
-
|
|
543
|
+
### Example:
|
|
453
544
|
|
|
454
|
-
```
|
|
545
|
+
```tsx
|
|
546
|
+
jsxCopy code
|
|
455
547
|
import { ZoomButton } from "./ZoomButton";
|
|
456
548
|
import * as THREE from "three";
|
|
457
549
|
|
|
@@ -463,3 +555,5 @@ const App = () => {
|
|
|
463
555
|
);
|
|
464
556
|
};
|
|
465
557
|
```
|
|
558
|
+
|
|
559
|
+
##
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Ref } from "react";
|
|
2
2
|
import { Object3D, Object3DEventMap } from "three";
|
|
3
|
-
import {
|
|
3
|
+
import { groundRayType } from "../controller/type";
|
|
4
4
|
export type playActionsType = {
|
|
5
5
|
groundRay: groundRayType;
|
|
6
6
|
};
|
|
@@ -11,15 +11,18 @@ export type playResultType = {
|
|
|
11
11
|
actions: actionsType;
|
|
12
12
|
ref: Ref<Object3D<Object3DEventMap>>;
|
|
13
13
|
};
|
|
14
|
-
export declare function
|
|
14
|
+
export declare function readyAnimation(): {
|
|
15
15
|
resultRef: {
|
|
16
16
|
character: playResultType;
|
|
17
17
|
vehicle: playResultType;
|
|
18
18
|
airplane: playResultType;
|
|
19
19
|
};
|
|
20
|
-
play: (tag: keyof animationTagType) => void;
|
|
21
|
-
setAnimationName: (actions: actionsType) => void;
|
|
22
20
|
};
|
|
23
21
|
export default function playCharacterActions({ groundRay }: playActionsType): {
|
|
24
22
|
ref: Ref<Object3D<Object3DEventMap>>;
|
|
23
|
+
resultRef: {
|
|
24
|
+
character: playResultType;
|
|
25
|
+
vehicle: playResultType;
|
|
26
|
+
airplane: playResultType;
|
|
27
|
+
};
|
|
25
28
|
};
|