Skip to content

Instantly share code, notes, and snippets.

@marcus-sa marcus-sa/LoadingScreen.js Secret
Created Nov 30, 2017

Embed
What would you like to do?
Pixi.js example
const { EventEmitter } = require('events')
const io = require('socket.io-client')
const utils = require('../utils')
const LoadingScreen = require('./LoadingScreen')
module.exports = class GameClient extends EventEmitter {
//socket: Object
constructor(options/*options: Object*/) {
if (window) {
super()
require('pixi.js')
options = utils.validate(options, {
host: {
type: 'string',
default: '127.0.0.1'
},
port: {
type: 'integer',
default: 30000
},
secure: {
type: 'boolean',
default: false
},
container: {
type: 'element',
required: true
},
width: {
type: 'integer',
default: options.container.offsetWidth
},
height: {
type: 'integer',
default: options.container.offsetHeight
},
authTicket: {
type: 'string',
required: true
},
backgroundColor: {
default: 0x0E151C
},
resolution: {
type: 'integer',
default: 1
}
})
const { container, backgroundColor, resolution, height, width } = options
/*const socket = this.socket = io.connect(`//${options.host}:${options.port}`, {
secure: options.secure
})*/
require('webfontloader').load({
custom: {
families: ['Ubuntu', 'Ubuntu Condensed'],
urls: [`//${options.host}:${options.port}/fonts/fonts.css`]
}
})
const app = PIXI.autoDetectRenderer({
autoResize: true,
width,
height,
backgroundColor,
resolution
})
container.appendChild(app.view)
const loadingScreen = new LoadingScreen(app, options)
/*let progress = 0
const interval = setInterval(() => {
if (progress > 100) {
return clearInterval(interval)
}
console.info(progress)
progress++
loadingScreen.updateProgress(progress)
}, 1000)*/
/*socket.emit('authenticate', options.authTicket)
socket.on('authenticated', (user: Object) => {
splashScreen.container.destroy(true)
})*/
}
}
}
module.exports = class LoadingScreen {
/**
* container: Object
* props: Object
* width2: Number
* height2: Number
* loadingBarCanvas: Object
* loadingBarSprite: Object
*/
constructor (app, options) {
this.container = new PIXI.Container()
this.app = app
this.props = options
this.progress = 0
this.width2 = app.renderer.width / 2
this.height2 = app.renderer.height / 2
const loader = new PIXI.loaders.Loader()
loader.add('stack', this.getImageUrl('stack.png'))
.add('photo', this.getImageUrl('photo.png'))
.add('frame', this.getImageUrl('frame.png'))
.on('error', console.error)
.load(this.setup.bind(this))
// Initiate loading bar
this.createLoadingText()
this.createLoadingBar()
}
createLoadingText() {
// @TODO: Fix text resolution - add X % text
const textStyle = new PIXI.TextStyle({
fill: 'white',
fontFamily: 'Ubuntu Condensed',
fontWeight: 'bold',
fontSize: '30px',
align: 'center',
letterSpacing: 1
})
this.loadingText = new PIXI.Text('I like your t-shirt uziboozy.', textStyle)
// Set anchor point to horizontal center
this.loadingText.anchor.set(0.5)
this.loadingText.position.set(this.width2, this.height2 + 250)
this.container.addChild(this.loadingText)
}
createLoadingBar() {
// Loader container to hold all graphical elements
const ldCtr = new PIXI.Container()
const ldBarHeight = this.loadingText.position.y + 38
const ldBarWidth = this.width2 - (409 / 2) // ldBarCtr width
// Loader bar container with white border
const ldBarCtr = new PIXI.Graphics()
ldBarCtr.lineStyle(1, 0xFFFFFF)
ldBarCtr.drawRoundedRect(0, 0, 409, 29, 1)
ldBarCtr.position.set(ldBarWidth - 5, ldBarHeight - 6)
ldCtr.addChild(ldBarCtr)
// Black background for the loader bar
const ldBarBg = new PIXI.Graphics()
ldBarBg.beginFill(0x000000)
ldBarBg.drawRect(0, 0, 404, 24)
ldBarBg.endFill()
ldBarBg.position.set(ldBarWidth - 3, ldBarHeight - 3)
ldCtr.addChild(ldBarBg)
// Loader bar itself
const ldBar = new PIXI.Graphics()
ldBar.beginFill(0xBACAD3)
ldBar.drawRect(0, 0, 1, 8.5)
ldBar.endFill()
ldBar.beginFill(0x8CA1AD)
ldBar.drawRect(0, 8.5, 1, 11.5)
ldBar.endFill()
// Create sprite from texture so the width can be adjusted
this.ldBarSprite = new PIXI.Sprite(this.app.generateTexture(ldBar))
this.ldBarSprite.position.set(ldBarWidth - 1, ldBarHeight - 1)
ldCtr.addChild(this.ldBarSprite)
this.container.addChild(ldCtr)
}
updateProgress(progress) {
this.ldBarSprite.width = progress * 4.5
//this.ldBarSprite.texture.update()
//this.animate()
}
setup(loader, resources) {
const stackHeight = this.height2 - 25
const stack = new PIXI.Sprite(resources.stack.texture)
stack.anchor.set(0.5)
stack.position.set(this.width2, stackHeight)
this.container.addChild(stack)
const photo = new PIXI.Sprite(resources.photo.texture)
photo.anchor.set(0.5)
photo.position.set(this.width2 + 6, stackHeight - 6)
this.container.addChild(photo)
const frame = new PIXI.Sprite(resources.frame.texture)
frame.anchor.set(0.5)
frame.position.set(this.width2, stackHeight)
this.container.addChild(frame)
this.render()
}
render() {
requestAnimationFrame(this.render.bind(this))
this.app.render(this.container)
}
getImageUrl (image/*String*/) {
return `//${this.props.host}:${this.props.port}/images/splash_screen/${image}`
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.