Sign up for a plan to instantly unlock all premium lessons.
Premium Features
Download Video
Spaceship Sprite Animation
We can create an animation for our spaceship in two ways:
Through a sprite sheet
Dynamic elements created directly within canvas
We'll opt for the second method here because it lends to a more randomized look.
0:00 Feature summary
0:43 Populate particles array
5:54 Render new particles
10:38 Spread out particles
'%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
Login
No comments yet, be the first to add one