Sint webgl-core based on PixiJs-core, is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools.
<script src="dist/sint.min.js"></script>
npm install sint.js
import * as SINT from 'sint.js'
const config = {
canvas: document.querySelector('#webglStage'), // HTMLElement
initWidth: 750,
initHeight: 1334,
showFPS: true,
backgroundColor: 0x2a3145,
};
const assets = {
bg: './assets/bg.jpg',
pic1: './assets/pic1.png',
sound0: './assets/sound/bg.mp3',
sound1: './assets/sound/s1.mp3',
}
const game = new SINT.Game(config);
game.preload({
assets: assets,
loading: loading,
loaded: create,
})
function loading(_pr) {
console.log('loading ' + _pr);
}
function create() {
// bg image
var bg = new SINT.SpriteClip('bg');
game.add(bg);
// btn
var btn = new SINT.SpriteClip('pic1',288, 292);
btn.anchor.set(0.5);
game.add(btn);
// audio
var s0 = SINT.Audios.add('sound0');
s0.loop=true;
SINT.Audios.add('sound1');
// events
btn.interactive = true;
btn
.on('pointerdown', onPointStart)
.on('pointerup', onPointUp)
.on('pointerupoutside', onPointUp)
.on('pointermove', onPointMove);
function onPointStart(event) {
// the first audio must be use by interactive Event
s0.play();
}
function onPointMove(event) {
//console.log(event.data.global)
}
function onPointUp(event) {
SINT.Audios.get('sound1').play();
}
}
// destroy and remove view
game.removeThis();