Premium Features
Download Video
Interface Design and Animation
The majority of our game is complete, but the interface looks kind of silly. Here I'll show you how to transform this jank interface into something that actually meshes quite well into our game using HTML, CSS, and GSAP.
0:00 - Color Design
3:29 - Borders
6:51 - Change Font
8:53 - Add Contrast Between Background and Fighters
11:04 - Animate Health Bar Downwards
'%3e%3cpath%20d='M358.283,108.588H325.625a27.056,27.056,0,0,0-23.431,13.528L142.6,398.545a27.056,27.056,0,0,0,0,27.056l16.329,28.283a27.056,27.056,0,0,0,23.431,13.528H501.551a27.057,27.057,0,0,0,23.431-13.527L541.311,425.6a27.056,27.056,0,0,0,0-27.056l-159.6-276.429A27.056,27.056,0,0,0,358.283,108.588Z'%20fill='%232d0091'/%3e%3cpath%20d='M358.283,108.588a27.056,27.056,0,0,1,23.431,13.528l159.6,276.429a27.056,27.056,0,0,1,0,27.056l-16.329,28.283a27.056,27.056,0,0,1-23.431,13.528h-319.2a27.056,27.056,0,0,1-23.429-13.527L142.6,425.6a27.056,27.056,0,0,1,0-27.056L302.2,122.115a27.056,27.056,0,0,1,23.431-13.528h32.658m0-18.788H325.625a45.97,45.97,0,0,0-39.7,22.922L126.325,389.15a45.972,45.972,0,0,0,0,45.844l16.329,28.283a45.971,45.971,0,0,0,39.7,22.922h319.2a45.97,45.97,0,0,0,39.7-22.922L557.582,435a45.972,45.972,0,0,0,0-45.844l-159.6-276.429a45.971,45.971,0,0,0-39.7-22.922Z'%20fill='%23ffa800'/%3e%3cpath%20d='M341.953,139.6l-5.478,30.907-30.906,5.478,30.906,5.479,5.478,30.907,5.479-30.907,30.907-5.479-30.907-5.478Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M291.477,217.312l-2.829,15.96-15.96,2.829,15.96,2.829,2.829,15.96,2.829-15.96,15.96-2.829-15.96-2.829Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M392.43,217.312l-2.828,15.96-15.96,2.829L389.6,238.93l2.829,15.96,2.83-15.96,15.96-2.829-15.96-2.829Z'%20fill='%23f6ffff'/%3e%3cg%20clip-path='url(%23a)'%3e%3cpath%20d='M375.825,371.625l-11.05-52.146-22.821-1.649-22.821,1.649-11.051,52.146A94.7,94.7,0,0,1,223.973,446.3l-83.835,7.581v13.528H543.77V453.884L459.935,446.3A94.7,94.7,0,0,1,375.825,371.625Z'%20fill='%23ff8300'/%3e%3cpath%20d='M358.351,411.411l-.058-.366,6.3-67.507-22.635-6.732-22.634,6.732,6.3,67.507-.058.366a62.226,62.226,0,0,1-46.282,50.621l-21.386,5.38h168.12l-21.385-5.38a62.226,62.226,0,0,1-46.282-50.621Z'%20fill='%23ffa800'/%3e%3c/g%3e%3cpath%20d='M333.486,358.35a38.129,38.129,0,0,1,5.863,9.948h5.21a38.131,38.131,0,0,1,5.863-9.948,61.98,61.98,0,0,0,14.316-37.464l.037-1.406L356.1,273.318a107.3,107.3,0,0,0-10.381-29.927h-7.532a107.3,107.3,0,0,0-10.381,29.927l-8.674,46.162.037,1.406a61.98,61.98,0,0,0,14.317,37.464Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M321.6,306.142l.025.058.011-.058Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M352.568,312.053a66.825,66.825,0,0,0-1.722-15.07l-5.333-23.02a3.628,3.628,0,0,0-.749-1.575h0a3.632,3.632,0,0,0-6.369,1.575l-5.332,23.018a66.781,66.781,0,0,0-1.723,15.072h21.228Z'%20fill='%232d0091'/%3e%3cpath%20d='M334.109,330.421l3.456,7.476a4.656,4.656,0,0,0,8.778,0l3.456-7.475a29.99,29.99,0,0,0,2.769-12.59H331.34a29.981,29.981,0,0,0,2.772,12.594Z'%20fill='%232d0091'/%3e%3cpath%20d='M325.615,411.045h0a157.327,157.327,0,0,0-1.881-74.583l-4.6-16.983-9.7,45.792Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M358.293,411.045l16.186-45.774-9.7-45.792-4.6,16.984a157.348,157.348,0,0,0-1.881,74.582Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M281.335,340.43a26.973,26.973,0,0,0,29.034-20.944h0l-22.859-7.4v.016a13.37,13.37,0,0,0-9.851.15l-54.173,22.333Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M173.966,397.676l95.063-23.536a51.33,51.33,0,0,0,23.956-13.527l10.537-10.537,6.847-30.59Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M373.538,319.486h0a26.975,26.975,0,0,0,29.035,20.944l57.849-5.847L406.249,312.25a13.477,13.477,0,0,0-5.138-1.017h0a13.461,13.461,0,0,0-4.714.867v-.016l-22.858,7.4Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M509.942,397.676,414.879,374.14a51.33,51.33,0,0,1-23.956-13.527l-10.537-10.537-6.847-30.59Z'%20fill='%23f6ffff'/%3e%3c/g%3e%3c/svg%3e)
Comments
Want to participate?
Create a free Chris Courses account to begin
No comments yet, be the first to add one