Videojuegos con Vue:
Lessons learned
Sobre mi
Que piensa la gente cuando piensa en videojuegos
(uncharted, battlefield)
Sudden realization: sé programar
Live
UI basadas en texto
UI basadas en texto
UI basadas en texto
Live
Control del tiempo
// ...
mounted () {
eventBus.$on('gameStatusChange', this.handleGameStatusChange)
this.startGameLoop()
},
beforeDestroy () {
this.resetGameLoop()
},
methods: {
startGameLoop () {
// to be overwritten by component
},
resetGameLoop () {
clearTimeout(this.loop)
this.loop = null
},
handleGameStatusChange (isPaused) {
if (isPaused) {
this.resetGameLoop()
} else {
this.startGameLoop()
}
}
}Control del tiempo
SetTimeout y SetInterval
// Stats.vue
methods: {
...mapMutations(['decrease']),
startGameLoop () {
this.decreaseStats()
},
decreaseStats () {
const decreaseInterval = 12 * 1000
this.loop = setTimeout(() => {
if (this.isActive) {
// decrease all stats
this.decreaseStats()
}
}, decreaseInterval)
}
}
// DaysCounter.vue
methods: {
...mapMutations(['increaseDayCount']),
startGameLoop () {
this.startDayTimer()
},
startDayTimer () {
const day = 1000 * 60
this.loop = setTimeout(() => {
if (this.isActive) {
this.increaseDayCount()
this.startDayTimer()
}
}, day)
}
}Control del tiempo
Problemas
Precisión
No son 100% precisas
The time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. [...] The actual delay may be longer than intended.
...
12
12
12
12
12
55
Pausa
Days
Days
Pausa
Control del estado
Store o componente?
Necesidades
- Control del tiempo
- Acciones con resultado
- Control del estado
- Leaderboard
Eurobattle
Game Jam
- Hackaton de videojuegos
- Duración determinada
- Limitado a un tema
- Online o presencial
- Sola o en equipo
- Global Game Jam, Ludum Dare, Game Off…
Todas Jammers II
Eurobattle
Control del tiempo
Por turnos
Control del estado
Todo en el store!
(o casi)
Control del input
Form elements
Radio Liberty
Cosas que me gustan
Cosas aprendidas
Cosas por aprender
Aventura gráfica con aspectos de survival
Radio Liberty
WIP
Phaser
- Animaciones
- Control de movimiento
- Especializado
- Aprender
- Renderizar HTML
- Control del estado
- Documentación
- Aprender 😅
Pros
Cons
Phaser
- Animaciones
- Control de movimiento
- Especializado
- Aprender
- Renderizar HTML
- Control del estado
- Documentación
- Aprender 😅