MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

more!! style!!

master
evan 2019-10-08 15:41:37 -07:00
parent 9b35a9851f
commit 9a174671bf
4 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/canvas_handler.ts
View File

@ -25,10 +25,10 @@ export class CanvasHandler {
this.imageElement = imageElement; this.imageElement = imageElement;
this.orginInfo = originInfo; this.orginInfo = originInfo;
this.ResizeCanvas(0, 0); this.ResizeCanvas(256, 256);
this.UpdateCanvasDataSize(); this.UpdateCanvasDataSize();
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!; const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize); canvasContext.clearRect(0, 0, this.targetImageSize, this.targetImageSize);
canvasContext.imageSmoothingEnabled = false; canvasContext.imageSmoothingEnabled = false;
} }

9
app/page.ts
View File

@ -62,6 +62,13 @@ export class Page {
widthRatio: 0 widthRatio: 0
}; };
const info = document.getElementById('info') as HTMLElement;
const helpButton = document.getElementById('helpButton') as HTMLElement;
helpButton.addEventListener('click', () => {
info.classList.toggle('hidden');
});
this.outputMessage = document.getElementById('outputMessage') as HTMLElement; this.outputMessage = document.getElementById('outputMessage') as HTMLElement;
this.message = document.getElementById('message') as HTMLElement; this.message = document.getElementById('message') as HTMLElement;
@ -309,7 +316,7 @@ export class Page {
this.animationData.originY = null; this.animationData.originY = null;
this.animationData.frameRate = 30; this.animationData.frameRate = 30;
this.animationData.loop = true; this.animationData.loop = true;
this.animationData.frames = [{ filename: '' }]; this.animationData.frames = [ { filename: '' } ];
// blank slate canvas data // blank slate canvas data
this.projectData.currentFrame = 0; this.projectData.currentFrame = 0;

46
app/stylesheets/main.scss
View File

@ -27,6 +27,41 @@ div {
font-family: "Arial", Helvetica, sans-serif; font-family: "Arial", Helvetica, sans-serif;
} }
#helpButton {
display: block;
position: absolute;
right: 10px;
top: 10px;
border: 1px solid;
border-radius: 25px;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
}
.hidden {
display: none !important;
}
#info {
display: block;
position: absolute;
right: 30px;
top: 10px;
width: 200px;
text-align: center;
}
.instruction {
font-size: 12px;
margin: auto;
width: 80%;
padding: 8px;
text-align: center;
background-color: $secondary-bg-color;
}
.center { .center {
margin: auto; margin: auto;
padding: 10px; padding: 10px;
@ -95,7 +130,7 @@ input[type=number]::-webkit-outer-spin-button {
} }
input[type='number'] { input[type='number'] {
-moz-appearance:textfield; -moz-appearance: textfield;
} }
#framerate { #framerate {
@ -111,15 +146,6 @@ input[type='number'] {
text-align: center; text-align: center;
} }
.instruction {
font-size: 12px;
margin: auto;
width: 50%;
padding: 8px;
text-align: center;
background-color: $secondary-bg-color;
}
#frameViewer { #frameViewer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

9
dist/index.html vendored
View File

@ -8,11 +8,12 @@
</head> </head>
<body> <body>
<div id="helpButton">?</div>
<div id="dropZone"> <div id="dropZone">
<div id="allTop"> <div id="allTop">
<div id="top"> <div id="top">
<div id="canvasStyle"> <div id="canvasStyle">
<canvas id="canvasImage" class="spriteCanvas" alt=""></canvas> <canvas id="canvasImage" class="spriteCanvas" alt="" width="256" height="256"></canvas>
<div id="frameNumber"></div> <div id="frameNumber"></div>
</div> </div>
</div> </div>
@ -40,12 +41,12 @@
</div> </div>
<div id="addpin" class="pinButtonContainer">+</div> <div id="addpin" class="pinButtonContainer">+</div>
</div> </div>
<div id="info"> <div id="info" class="hidden">
<div class="instruction"> <div class="instruction">
<p>Drag images onto the page to upload them</p> <p>Drag a group of images onto the page to load them</p>
<p><b>Arrow Keys</b> - Advance frames</p> <p><b>Arrow Keys</b> - Advance frames</p>
<p><b>Spacebar</b> - Play/Pause Animation</p> <p><b>Spacebar</b> - Play/Pause Animation</p>
<p><b>S</b> - Save</p> <p><b>S</b> - Export</p>
</div> </div>
<div id="outputMessage"></div> <div id="outputMessage"></div>
</div> </div>