Scribd Logo
Unggah

Selamat datang di Scribd!

  • Teach Game Development With Google Apps 1

    Diunggah oleh

    api-235413627
    39 tayangan26 halaman

    Judul Asli

    teach game development with google apps 1

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    39 tayangan26 halaman

    Teach Game Development With Google Apps 1

    Diunggah oleh

    api-235413627

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 26

    https://goo.

    gl/dRzY1X

    Teach Game Development


    with Google Apps
    Chanelle Tolentino, HTA HS Digital Electives Teacher
    Jenn Francis, HTA Assistant Director

    April 11, 2018


    Background
    K-12: Oahu, Maui, Kauai, Hawaii Island

    Blended Learning

    Offering game dev for 3 years, used editey

    Partnership with DevLeague

    Web application development via HTML, CSS, & JS


    core values
    Critical Thinking: Debugging, patience in double
    checking code

    Creativity: Coming
    Creativity: Coming up
    up with
    with the
    the idea
    idea for
    for your
    your
    application, thinking
    application, thinking through
    through the
    the logic,
    logic, how
    how it
    it functions
    functions

    Collaboration: So much to know in coding.


    Important to work with others and grow together
    (community).

    Communication: Delegating
    Communication: Delegating as
    as aa team
    team roles,
    roles,
    discuss responsibilities,
    discuss responsibilities, communicate
    communicate vision
    vision clearly.
    clearly.
    Skills for Game Dev
    Critical Thinking

    -Detail oriented (spelling, order of info, formulas)

    -Resilience (debugging & continuous learning)

    Collaboration

    -New ideas

    -Help with bugs

    -Staying motivated
    Skills for Game Dev
    Creativity

    -Design ideas & illustration for different elements of game production

    -Problem solving

    Communication

    -Clarity between teammates

    -Clarity of how code is to work


    Tools for Game Dev
    -Code editor (Editey)

    -Digital Illustrator (Google Drawing)

    -HTML, CSS, JS

    -API (Phaser)
    Build first game
    1. Learn basic HTML, CSS, & JS
    2. Understand game elements, design, & psuedocode
    3. Add editey to google apps in your drive
    4. Source code
    Stylizing

    Structure

    Interactivity
    OBJECTIVE 1
    Understand basic HTML

    HTML stands for: Hypertext Markup Language

    HTML is used to: Build content on webpages

    HTML syntax includes: Angle Brackets < >

    Open tag <head>, Close tag </head>


    HTML: header tags, paragraph tags, image tags
    OBJECTIVE 2
    CSS: style tags, paragraph tags, image tags

    CSS stands for: Cascading Style Sheet

    CSS is used to: Stylize the content on a webpage

    CSS syntax includes: Curly Brackets { }

    CSS Properties: Color, Background, Layout,


    Font, etc.
    CSS: color, font, & background properties
    OBJECTIVE 3
    Explore your first coding project: WEBSITE RESUME
    OBJECTIVE 4
    Overview of Javascript
    JS stands for: Javascript

    JS is used to: Build interactive content on webpages

    JS syntax includes: Curly Brackets { }, Square Brackets [ ]

    Semicolons; commas, colons: parenthesis ( )

    Variables, Functions, Methods, Loops, etc.


    student work
    student work
    student work
    student work
    DESIGN OF ANIMATION NOTES
    ANIMATION

    CLICK HERE TO START

    LAYOUT MUST HAVE? HOW GAME WORKS?

    Draw a box Click the button

    Button Box moves from the left of the screen to the right

    Text “Animation”
    OBJECTIVE 5
    Add Editey to your Google Apps
    codepen.io
    OBJECTIVE 6
    Create Animation Editey Workspace

    Hold shift + click


    on all 3 files
    OBJECTIVE 7
    Source code for Animation
    https://goo.gl/keKqD7
    TRY
    ● different color of border, h1, & background, using the w3schools > CSS >
    color picker

    ● different values of x, y, w & h to see how it affects location & size of


    rectangle

    ● different value of speed to see how it affects animation

    ● look up how to center a button


    OBJECTIVE 8
    Source code for Sprite Animation
    https://goo.gl/mbRM8q
    ● Create a google drawing in your “game” folder
    ● Set the page dimensions to 40x40 pixels
    ● Create your sprite
    ● Download as a jpg
    ● Upload it to your “game” folder
    ● Copy the ^^ source code into your files
    Resources & Tips
    1. DevLeague & Jr DevLeague
    2. Free Code Camp
    3. W3 Schools
    4. CodePen
    5. Online courses
    ctolentino@myhta.org

    SPRING Design Thinking


    Challenge/Hackathon

    Anda mungkin juga menyukai