0.0.2 • Published 3 years ago
boson-dcl v0.0.2
BOSON PROTOCOL Decentraland Gateway
Installation
npm i eth-connect@5.0.0 boson-dcl -B
dcl build
Verify that these lines have been added in the file './tsconfig.json', otherwise add them manually:
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"eth-connect": [
"node_modules\\eth-connect\\eth-connect.d.ts"
],
"boson-dcl": [
"node_modules\\boson-dcl\\dist\\src\\index.d.ts"
]
},
},
...
"files": [
...
"./node_modules/eth-connect/eth-connect.js",
"./node_modules/boson-dcl/dist/index.js"
],
}
Finally, copy the following images from './example/images' into your project (in './images' folder):
- btn_close.png
- commit_background.png
- commit_button.png
Integrate with your scene
Modif your code as follow
- Import the type required for the Commit popup window
import { UICommit } from 'boson-dcl';
- Define the canvas object in the scene, if not already done
const canvas = new UICanvas();
- For each item for sale:
- Create the popup window instance for these item (type UICommit)
const fireworksCommit = new UICommit( canvas, { image: { texture: new Texture("images/fireworks-pot.png"), width: 900, height: 675 }, title: "Fireworks Pot", id: '151' } };
- Where the 3D entity representing the item is created, attach the OnPointerDown event callback, showing the popup:
const fireworksBox = new Entity('fireworksBox') ... fireworksBox.addComponentOrReplace(new OnPointerDown(() => { fireworksCommit.show(); }, { button: ActionButton.POINTER, hoverText: 'Buy me !!!', }))
- Create the popup window instance for these item (type UICommit)