dialogue animation + debugger
refactored all the dialogue text animations to use css animation and transforms rather than frame by frame positioning this causes some issues and the code isnt the cleanest, but its already feels smoother so thats a good start! using the devtools for debugging was getting annoying so I added a `Game.debug()` method that toggles a custom debugger that includes a drawer containing links to all points in the script
This commit is contained in:
parent
d59d8af01d
commit
c56eea3b49
|
@ -206,8 +206,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialogue position debugging elements -->
|
||||
<div class='debug' style='position: absolute; width: 5px; height: 250px; background: red;'></div>
|
||||
<div class='debug' style='position: absolute; width: 5px; height: 80px; background: white;'></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="debug" id="section_debug_list"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -29,12 +29,22 @@ window.attackBB = function(damage, type){
|
|||
// Init
|
||||
Game.init = function(){
|
||||
|
||||
// Create the section debug menu
|
||||
Object.keys(Game.sections).forEach(function(key){
|
||||
const link = document.createElement('div');
|
||||
link.className = "section_link";
|
||||
link.innerText = key;
|
||||
link.addEventListener('click', function() {
|
||||
Game.goto(key);
|
||||
});
|
||||
document.getElementById("section_debug_list").appendChild(link);
|
||||
})
|
||||
|
||||
// HP!
|
||||
window.HP = new HitPoints();
|
||||
|
||||
// Animation!
|
||||
console.log("init");
|
||||
Game.wordsDOM.style.top = "80px";
|
||||
var animloop = function(){
|
||||
Game.update();
|
||||
requestAnimationFrame(animloop);
|
||||
|
@ -43,6 +53,11 @@ Game.init = function(){
|
|||
|
||||
};
|
||||
|
||||
// Call to toggle debug rendering
|
||||
Game.debug = function(){
|
||||
document.body.classList.toggle('show_debug');
|
||||
}
|
||||
|
||||
// Parse scene markdown!
|
||||
Game.parseSceneMarkdown = function(md){
|
||||
|
||||
|
@ -293,20 +308,51 @@ Game.immediatePromise = function(){
|
|||
|
||||
// Move the text DOM to latest
|
||||
Game.FORCE_TEXT_Y = -1;
|
||||
Game.WORDS_HEIGHT_BOTTOM = 250;
|
||||
Game.updateText = function(instant){
|
||||
if(Game.WORDS_HEIGHT_BOTTOM<0) Game.WORDS_HEIGHT_BOTTOM=250; // back to default
|
||||
if(Game.FORCE_TEXT_Y<0){
|
||||
var wordsHeight = 80 + Game.wordsDOM.getBoundingClientRect().height;
|
||||
var currentY = Game.wordsDOM.style.top=="" ? 80 : parseFloat(Game.wordsDOM.style.top);
|
||||
var gotoY = (wordsHeight<Game.WORDS_HEIGHT_BOTTOM) ? 0 : wordsHeight-Game.WORDS_HEIGHT_BOTTOM;
|
||||
gotoY = 80 - gotoY;
|
||||
var nextY = instant ? gotoY : currentY*0.9 + gotoY*0.1;
|
||||
Game.wordsDOM.style.top = (Math.round(nextY*10)/10)+"px";
|
||||
}else{
|
||||
Game.wordsDOM.style.top = Game.FORCE_TEXT_Y+"px";
|
||||
}
|
||||
};
|
||||
Game.WORDS_HEIGHT_BOTTOM = -1;
|
||||
(function(){
|
||||
const offset = 80
|
||||
let lastCount = 0
|
||||
let lastBottom = -1
|
||||
Game.updateText = function(instant) {
|
||||
|
||||
if(Game.WORDS_HEIGHT_BOTTOM < 0) Game.WORDS_HEIGHT_BOTTOM = 250;
|
||||
|
||||
let updated = false
|
||||
function updateTransform(){
|
||||
if(updated) return
|
||||
updated = true
|
||||
|
||||
if(Game.FORCE_TEXT_Y != -1){
|
||||
Game.wordsDOM.style.transform = `translateY(${Game.FORCE_TEXT_Y}px)`;
|
||||
return
|
||||
}
|
||||
|
||||
const wordsHeight = Game.wordsDOM.clientHeight;
|
||||
let diff = wordsHeight - (Game.WORDS_HEIGHT_BOTTOM - offset)
|
||||
if(diff < 0) diff = 0
|
||||
|
||||
Game.wordsDOM.style.transform = `translateY(${offset - diff}px)`;
|
||||
}
|
||||
|
||||
if(Game.wordsDOM.children.length != lastCount){
|
||||
updateTransform()
|
||||
lastCount = Game.wordsDOM.children.length;
|
||||
}
|
||||
|
||||
if(Game.WORDS_HEIGHT_BOTTOM != lastBottom){
|
||||
updateTransform()
|
||||
lastBottom = Game.WORDS_HEIGHT_BOTTOM;
|
||||
}
|
||||
|
||||
if(instant || Game.FORCE_TEXT_Y != -1){
|
||||
updateTransform()
|
||||
Game.wordsDOM.classList.add("clear_transition");
|
||||
Game.wordsDOM.clientHeight;
|
||||
Game.wordsDOM.classList.remove("clear_transition");
|
||||
}
|
||||
|
||||
};
|
||||
})()
|
||||
|
||||
// CLEAR TEXT
|
||||
Game.clearText = function(){
|
||||
|
|
|
@ -13,6 +13,41 @@ body {
|
|||
overflow: hidden;
|
||||
margin:0;
|
||||
background: #111;
|
||||
font-size: 20px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: 100;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
/******************************************************************************************************
|
||||
|
||||
DEBUGGING
|
||||
|
||||
******************************************************************************************************/
|
||||
|
||||
body:not(.show_debug) .debug {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.show_debug #game_container * {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
|
||||
#section_debug_list {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
transition: all 0.2s;
|
||||
font-family: monospace;
|
||||
opacity: 0.2;
|
||||
transform: translateX(-95%);
|
||||
}
|
||||
|
||||
#section_debug_list:hover {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/******************************************************************************************************
|
||||
|
@ -27,20 +62,18 @@ MAIN GAME
|
|||
width: 360px;
|
||||
height: 600px;
|
||||
background: #000;
|
||||
|
||||
font-size: 20px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: 100;
|
||||
line-height: 1.3em;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
#game_words{
|
||||
width: auto;
|
||||
position: relative;
|
||||
top: 80px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
#game_words.clear_transition {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
#game_words, #game_hp, #click_to_advance{
|
||||
|
|
Loading…
Reference in New Issue