Section 10, Sprite Animations and Artwork.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "122b3b2e",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import Javascript Libraries: Execute this cell...\n",
    "from IPython.display import Javascript\n",
    "\n",
    "display(Javascript(\"jupyter_lib.js\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4378e07d",
   "metadata": {},
   "source": [
    "# Section 10: Sprite Animations and Artwork\n",
    "\n",
    "Goals:\n",
    " - Learn what a sprite is.\n",
    " - Learn how to create sprites.\n",
    " - Learn how to load and use sprites in the game engine.\n",
    " \n",
    "As you likely have recognized, all of the `GameObjects` you have created are just rectangles. This does not make for a very exciting game. So, how can we make our characters come to life? We can do that through the use of sprites. A sprite is simply a collection of images combined into 1 image, by tiling them. \n",
    "\n",
    "![Example of a Sprite](./images/player.png)\n",
    "$$ \n",
    "{\\scriptsize \\text{An example of a sprite, notice single frames of animations are tiled.}} \n",
    "$$\n",
    "\n",
    "To display each frame of an animation, we simply draw a single tile or section of the sprite. To move to the next frame, we just update the current tile in the sprite the drawer is pointing at. This makes sprites ideal for creating animations in games. For sprites to fully work, we need to identify a tile size, frame rate (speed to change tiles at), and which tiles are part of the animation.\n",
    "\n",
    "### Task 1: Come up with a Game Idea.\n",
    "\n",
    "Before we begin making sprites, I want you to think about the game you want to design. It could be anything you want, a basic platformer, flight simulator, soccer game, or anything else possible with the engine. One key note, don't think too big! Most modern games with lots of features are worked on by entire teams of developers and artists with years of experience, for several years on end! Also, no violence or gore, keep it PG. If you do include violence or gore, you won't be able to show your game at the end of class, and instead will present on one of the topics covered in class.\n",
    "\n",
    "## A Quick Demo of How To Load Sprites in the Game Engine.\n",
    "\n",
    "You may have been wondering what the empty `assets` section under the gameInfo object at the end of the game code was for. It's used to describe sprites (and sounds) that you need included in the game as resources. The following below is and example of a filled out sprite data object. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "40a475d5",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "let gameInfo = {\n",
    "    objects: {\n",
    "        // Game object types go in here...\n",
    "    },\n",
    "    zones: {\n",
    "        // Game levels, or 'zones' go in here.\n",
    "    },\n",
    "    // All game assets like sounds and sprites...\n",
    "    assets: {\n",
    "        // All sprites go under \"sprites\" entry....\n",
    "        sprites: {\n",
    "            // The sprite's name...\n",
    "            playerSprite: {\n",
    "                // Sprite image location, relative to this notebook.\n",
    "                image: \"images/player.png\",\n",
    "                // Width of the sprite, not required, defaults to the height of the sprite image.\n",
    "                width: 32,\n",
    "                // Identifies a set of animations. Each has a name, set of frames, a speed, and a cycle count...\n",
    "                // \"frames\" defaults to all frames sequentially if not set.\n",
    "                // \"speed\" defaults to 16ms per frame if not set.\n",
    "                // \"cycles\" defaults to -1 which means infinity cycles or repeats, if not set.\n",
    "                animations: {\n",
    "                    \"stand\": {\n",
    "                        \"frames\": [0],\n",
    "                    },\n",
    "                    \"run\": {\n",
    "                        \"frames\": [0, 1, 2, 3],\n",
    "                        \"speed\": 100\n",
    "                    },\n",
    "                    \"jump\": {\n",
    "                        \"frames\": [0, 4, 5],\n",
    "                        \"speed\": 150,\n",
    "                        \"cycles\": 1\n",
    "                    }\n",
    "                }\n",
    "            },\n",
    "            // Another sprite...\n",
    "            enemySprite: {\n",
    "                image: \"images/enemy.png\",\n",
    "                animations: {\n",
    "                    \"stand\": {\n",
    "                        \"frames\": [0],\n",
    "                    },\n",
    "                    \"run\": {\n",
    "                        \"frames\": [0, 1, 2, 3],\n",
    "                        \"speed\": 100\n",
    "                    },\n",
    "                    \"jump\": {\n",
    "                        \"frames\": [0, 4, 5, 5, 4],\n",
    "                        \"speed\": 150,\n",
    "                        \"cycles\": 1\n",
    "                    }\n",
    "                }\n",
    "            }\n",
    "        },\n",
    "        sounds: {\n",
    "            // Sounds go under this section...\n",
    "        }\n",
    "    }\n",
    "};"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b26fbb84",
   "metadata": {},
   "source": [
    "The game engine will automatically load all the images into memory into a \"Sprite Builder\" object. A sprite can be made from the sprite builder in the constructor of one of your game objects by using the name of the sprite followed by the function call `buildSprite()` as below. \n",
    "\n",
    "```javascript\n",
    "class Player extends GameObject {\n",
    "    constructor(x, y, blockSize, sprites) {\n",
    "        super(x, y, blockSize, sprites)\n",
    "        // Get the player sprite.\n",
    "        this._sprite = sprite.playerSprite.buildSprite();\n",
    "        // Rest of constructor code....\n",
    "    }\n",
    "    \n",
    "    // More methods....\n",
    "}\n",
    "```\n",
    "\n",
    "Once you have a sprite loaded, it provides the following methods....\n",
    " - `setAnimation(name)`: Set the animation of the sprite via it's name. If already set to this animation does nothing.\n",
    " - `getAnimation()`: Get the current animation the sprite is in, or null if one hasn't been set.\n",
    " - `width` and `height`: Get the width/height of a single tile in the sprite.\n",
    " - `update(timeStep)`: Update the sprite by `timeStep` amount. Will move animation to correct frame.\n",
    " - `draw(painter, x, y, width, height)`: Draw the sprite with the passed painter to the provided box.\n",
    " - `setVerticalFlip(value)`: Set if the sprite should be vertically flipped when drawn. (true or false)\n",
    " - `setHorizontalFlip(value)`: Set if the sprite should be horizontally flipped when drawn. (true or false)\n",
    " - `isVerticallyFlipped()` and `isHorizontallyFlipped()`: Check if the sprite is vertically or horizontally flipped.\n",
    "\n",
    "The following is an example of using the sprite object while drawing below. As you can see, it is very similar to drawing a rectangle, except we can dynamically change the animation in update.\n",
    "\n",
    "```javascript\n",
    "class Player extends GameObject {\n",
    "    //...\n",
    "    \n",
    "    update(timeStep, gameState) {\n",
    "        \n",
    "        let keys = gameState.keysPressed;\n",
    "        \n",
    "        if(\"ArrowLeft\" in keys || \"ArrowRight\" in keys) {\n",
    "            // If running set sprite to run animation...\n",
    "            this._sprite.setAnimation(\"run\");\n",
    "        }\n",
    "        else {\n",
    "            // Otherwise just make it stand still...\n",
    "            this._sprite.setAnimation(\"stand\");\n",
    "        }\n",
    "        \n",
    "        // Animate the sprite/move to the next frame...\n",
    "        this._sprite.update(timeStep);\n",
    "    }\n",
    "    \n",
    "    draw(canvas, painter, camera) {\n",
    "        //...\n",
    "        \n",
    "        // Draw the sprite....\n",
    "        this._sprite.draw(painter, cx, cy, cw, ch);\n",
    "    }\n",
    "    \n",
    "    // More methods....\n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6a873aa8",
   "metadata": {},
   "source": [
    "### Task 2: Learn to Use Piskel\n",
    "\n",
    "For making sprites you'll be using a free online sprite editor called Piskel. In this task, you will make a simple sprite with 3 frames using it. \n",
    "\n",
    "[https://www.piskelapp.com/](https://www.piskelapp.com/)\n",
    "\n",
    "Key Notes: \n",
    "   - Tools and animation editor are on the left side. Tools allow you to draw on the canvas. The animation editor allows you to add and modify frames in your animation.\n",
    "   - The other side includes the animation preview, layers, and full layer transforms. Layers allow for organization within a frame, transforms allow for flipping the image and performing other effects.\n",
    "   - On the far right are the canvas resize, save, and export functionalities.\n",
    "      - You'll want to both save to a `.piskel` and also export to a `.png` sprite with minimum height (All tiles laid out horizontally) We will go over this."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "626aab4d",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}