Week 3: Simple Graphics Drawing + Intro to XForm

Link to all source code (zipped) NEW: link to source code with update SimpleShader source file.

• Intro to working with Matrix and Transforms
  • Follow this link: http://faculty.washington.edu/ksung/2DGameEngine/BookChapters/AllExamples.html
  • Look at first three examples from Chapter 2 (STOP at Page 61).
  • Here is link to all of the source code from Chapter 3. NEW: link to source code with update SimpleShader source file.
  • NOTE: from now on you _WILL NOT_ be able to double click on the html file to open the app in the browser!
    • Because: the shaders must be "served" by the web-browser
      
      
• Example 4: Integrating AngularJS support!
  • Project structure Four separate entities: Graphics + GUI + Model: + External Lib
    • Engine folder: Graphics API
    • GUI: GUI Lib
    • App: The application folder
    • lib: External lib (Matrix and AngularJS)
  • MainController:
    • Contains the entire application (ClassExample)
      • This is the Model !
• ClassExample:
  • Adoption of previous MyGame.js code
  • Two main differences:
    • draw() function, instead of create and draw, we separate out draw()
    • Camera() object:
      • Instantiated: and setupViewProjection()
      • This is something we will come back and look at!
• Lesson:
  • Drawing to screen size!
  • Using xform to control location of objects
  • Drawing from the exact same hardware memory location,
  • Multiple Renderable objects, and thus user believes there are multiple objects in the environment!!
  • Observation: we are now seeing 800x600 pixel-space!!


• Example 5: GUI for Xform object
  • Sldier: Expanded to support dynamic changing of range (min/max) and active (for disabling)
    
  • The "pink" xform controller
    • Radio button: when clicked ...
      • sets mOpType (Operation type)
      • changes slider bar ranges
      • re-initialize sldier bar values according to the $scope.mXform
    • Two slider bars: mX, mY
      • mY Sldier: disabled when OpType == Rotation
      • updates corresponding xform fields
  • Logic changes UI!
    • Enable timer
      • Causes object to increase size
      • Must cause UI to follow!
  • Lesson:
    • Data binding, we have to do the binding between the GUI controller to the actual object (Xform)
    • Anything we have in the model, we can expose via GUI and manipulate interactively!
    • Annoying lack of two way binding for Xform elements
      • uiChangeObj vs. objChangeUI <-- explicity binding done by us!
    • Notice: must call MyWorld.d.raw() when my model changes, this is referred to as "redraw", as in "when the model is dirty a redraw should occur!"
      
      
• Example 6: separate XForm directive
  • New reusable directive: css-xform
  • CSS450Xform.js file
    • Almost straight copy/paste from the MainController from previous example
    • WATCH OUT FOR: Link at the bottom of the file
      • Here we say: if the "mXform" variable should change, we want to know
      • What we do is, we re-initialize the input states according to the new xForm
      • Support force redraw of GUI
        • when the position/scale/rotation of xform is changed by the timer (App logic)
  • Select different objects
  • CSS450Timer update with the new "link" and watch functionality
    • Stop using broadcast!!
  • Lesson:
    • Simple new GUI object
    • AngularJS: can $watch on scope variables (cool?)
    • We are maintaining data binding explicitly, when changing to a new xform object, we sets the controller values
    • Notice: inconsistency, when selected blue, there are now two controls to the blue xform, and the results are not consistently shown in the IO!!
      
      
• Example 7: Mouse Position
  • Change zoom factor (control-mid mouse button, and do a F5: to refresh the browser) to see canvas bound is not always exactly the same size as pixel
  • So consider the scale factor AND
  • Remember to flip-Y
  • Lesson:
    • Nothing much really, ok, canvas bounds may not be exactly on pixel, great.
    • Oh, the translation from canvas position to pixel can be probably support better?
      
      
• Example 8: Drag out a square
  • New class GUI: CanvasMouseSupport
    • Allow the creation/caching of Canvas information to support transforming canvas mouse click position into Pixels.
  • Lesson:
    • Keeping MainController clean of App information is nice!?
    • App/ClassExample takes care of all detailed behavior.
    • Notice:
      • Have to constantly worry and think of redraw() <-- when should we do this (as soon as anything is changed).
      • mouse position is not correct when the square is rotated. Why? How to fix this?
        
        
• Example 9: Timer for update and redraw, simple gravity simulation
  • Support simple simulation ==> World is changing constantly, so, might as well call draw constantly
    • relief the programmer from remembering to call draw when something changed
  • MainController:
    • Timer support for update and draw (so we don't have to worry about remembering to call draw after changes)
  • Model:
    • change to include update() and support dropping
  • Notice:
    • Xform: translation not updated!!
      • This is because in we did not tell the Xform GUI to update itself (mForceRedraw <-- need to be set to true)!
    • IMPORTANT:
      • update() function:: should not darw
      • draw() function: DO NOT change anything!