@drincs/pixi-vn 0.4.0 → 0.4.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 +96 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,3 +12,99 @@ This allows the use of systems such as React, Vue, Angular, etc. to create much
|
|
|
12
12
|
## Wiki
|
|
13
13
|
|
|
14
14
|
For more information, visit the [Web Page](https://pixi-vn.web.app/)
|
|
15
|
+
|
|
16
|
+
* [Why Pixi’VN?](https://pixi-vn.web.app/start/why.html)
|
|
17
|
+
* [Get Started](https://pixi-vn.web.app/start/getting-started.html)
|
|
18
|
+
* [Interface with JavaScript Framework](https://pixi-vn.web.app/start/interface.html)
|
|
19
|
+
|
|
20
|
+
### First steps
|
|
21
|
+
|
|
22
|
+
* [Characters](https://pixi-vn.web.app/start/character.html)
|
|
23
|
+
* [Dialogue and Narration](https://pixi-vn.web.app/start/narration.html)
|
|
24
|
+
* [Choice Menus](https://pixi-vn.web.app/start/choices.html)
|
|
25
|
+
* [Label and Game Step](https://pixi-vn.web.app/start/labels.html)
|
|
26
|
+
* [Game Storage](https://pixi-vn.web.app/start/storage.html)
|
|
27
|
+
* [Flags Management](https://pixi-vn.web.app/start/flags.html)
|
|
28
|
+
* [Save and Load](https://pixi-vn.web.app/start/save.html)
|
|
29
|
+
* [Images and Animations](https://pixi-vn.web.app/start/images.html)
|
|
30
|
+
|
|
31
|
+
### Advanced topics
|
|
32
|
+
|
|
33
|
+
* [Canvas Elements](https://pixi-vn.web.app/advanced/canvas-elements.html)
|
|
34
|
+
* [Animations and Effects](https://pixi-vn.web.app/advanced/animations-effects.html)
|
|
35
|
+
* [Tickers](https://pixi-vn.web.app/advanced/tickers.html)
|
|
36
|
+
* [Stored Classes](https://pixi-vn.web.app/advanced/stored-classes.html)
|
|
37
|
+
* [Intecept Events](https://pixi-vn.web.app/advanced/intercept-events.html)
|
|
38
|
+
|
|
39
|
+
## Installation
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm install @drincs/pixi-vn
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
|
|
47
|
+
For the following example, we will use React to create the interface and Pixi'VN to manage the visual novel.
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
// main.tsx
|
|
51
|
+
|
|
52
|
+
import { GameWindowManager } from '@drincs/pixi-vn'
|
|
53
|
+
import { createRoot } from 'react-dom/client'
|
|
54
|
+
import App from './App'
|
|
55
|
+
import './index.css'
|
|
56
|
+
|
|
57
|
+
// Canvas setup with PIXI
|
|
58
|
+
const body = document.body
|
|
59
|
+
if (!body) {
|
|
60
|
+
throw new Error('body element not found')
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
GameWindowManager.initialize(body, 1920, 1080, {
|
|
64
|
+
backgroundColor: "#303030"
|
|
65
|
+
}).then(() => {
|
|
66
|
+
// React setup with ReactDOM
|
|
67
|
+
const root = document.getElementById('root')
|
|
68
|
+
if (!root) {
|
|
69
|
+
throw new Error('root element not found')
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
GameWindowManager.initializeHTMLLayout(root)
|
|
73
|
+
const reactRoot = createRoot(GameWindowManager.htmlLayout)
|
|
74
|
+
|
|
75
|
+
reactRoot.render(
|
|
76
|
+
<App />
|
|
77
|
+
)
|
|
78
|
+
})
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
This is the HTML file that will be used to load the application.
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<!-- index.html -->
|
|
85
|
+
<!doctype html>
|
|
86
|
+
<html lang="en">
|
|
87
|
+
<head>
|
|
88
|
+
<meta charset="UTF-8" />
|
|
89
|
+
<link rel="icon" type="image/svg+xml" href="/pixiVN.svg" />
|
|
90
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
91
|
+
<title>Pixi'VN</title>
|
|
92
|
+
</head>
|
|
93
|
+
<body>
|
|
94
|
+
<div id="root"></div>
|
|
95
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
96
|
+
</body>
|
|
97
|
+
</html>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
```css
|
|
101
|
+
/* index.css */
|
|
102
|
+
:root {
|
|
103
|
+
background-color: #242424;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
body {
|
|
107
|
+
margin: 0;
|
|
108
|
+
display: flex;
|
|
109
|
+
}
|
|
110
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -1118,7 +1118,7 @@ function showImageWithDissolveTransition(tag, imageUrl, speed, priority) {
|
|
|
1118
1118
|
}
|
|
1119
1119
|
|
|
1120
1120
|
// src/constants.ts
|
|
1121
|
-
var PIXIVN_VERSION = "0.4.
|
|
1121
|
+
var PIXIVN_VERSION = "0.4.1";
|
|
1122
1122
|
|
|
1123
1123
|
// src/functions/SavesUtility.ts
|
|
1124
1124
|
function getSaveData() {
|