Clear Logbook

Transcript

1. Logbook of “Clear”
2. 2 What is “Clear” • A simple-to-use Todo List • Use Gesture to control – Pull down - Add – Tap - Edit – Left Swipe - Delete – Right Swipe - Mark as Done – Long Press - Re-order (Drag and Drop) • http://www.realmacsoftware.com/clear/
3. 3 Approach #1 - Android UI • First approach – android native UI – ListView ListView Adaptor Data notifyDataChanged() Update UI
4. 4 Android ListView vs. “Clear” • No Overscrolling – Cannot scroll to any position • No animation when updating (not common) • No drag and drop method (not common) • Lack of control in ListView – Update is performed by Listview (by calling notifyDataChanged()) – Only have onTouchDown(), onTouchUp(), onTouchMove() • How to detect long press?? • Special Case: Media Player Playlist, Any. Do
5. 5 Media Player Playlist How it achieves drag and drop? • When touch the icon – Convert the touch item view into a drawable – Set the drawable to the your finger position • Bitmap bitmap = Bitmap.createBitmap(item.getDrawingCache()); • Remark: Need to substract the offset • So... – What you are dragging is an image, not a view. – Just use visual effect to simulate drag-and- drop
6. 6 Long Press Detect • How to detect long press using onTouchDown(), onTouchUp() and onTouchMove() only? – Lots of approaches • Native Java Approach • Android Approach • Game Engine Approach • ...
7. 7 Long Press Native Java Approach • onTouchDown() – Initialize longPressed := false – Start a timer • When time out, longPressed := true • onTouchUp() – Stop the timer • onTouchDown() – Stop the timer
8. 8 Long Press Android Approach • onTouchDown() – longPressed := false – Post a runnable and set it to be run after a few sec. • onTouchUp() – Stop the timer • onTouchDown() – Stop the timer Touch Event Touch Event Run runnables ... UIThread/Main Thread Remark: Do not block the UI thread!! Perform High Computation Complexity Task in background thread!!
9. 9 Long Press Game Engine Approach • onTouchDown() – longPressed := false – downTs := timestamp • onTouchMove() – If(currentTs – downTs > T and displacement <D) • LongPressed := true • Why onTouchMove()? – It is hard to fix your finger on a point • Varying pressure and location – Always trigger onTouchMove()
10. 10 Migrate to “Clear” • Use the same concept – Generate drawable when • Right swipe • Left swipe • Long Press – Call notifyDataChanged() after the action
11. 11 #1 Problems • It takes time to convert view to an image • No animation is shown Hard to Notice the view is update Not attractive A bit laggy
12. 12 Approach #2 – Game Engine • Game Engine – A framework – Provides lots of functionality for gaming • Box2d – popular and used to simulate physic • Opengl – for drawing • Collision detection • EaseAction – simulate human body movement, e.g. walking • … (depends on what game engine you use) • Example – ka3d – 3D renderer of “Angry birds” – WiEngine – Game Engine of “Cut the rope”
13. 13 Basic Concept (libgdx) • Scene / Screen – Basically, a game consists of • Loading screen • Menu screen • Game screen
14. 14 Basic Concept ... • Sprite – has to be power of 2 in dimension – a set of images • Texture – A region of sprite
15. 15 Box2D • popular in game development, e.g. Diablo 3 • for simulating physical world • make objects move in believable ways and make the game world more interactive • from the game engine’s point of view, just a system for procedural animation • http://youtu.be/T99YX8Umj4Y?t=16s
16. 16 Approach #2 – Game Engine • Motivation – Treat each task as an object in a physical “world” – Set the gravity of this world to up • Tasks will be aligned upward automagically – Create a “elastic string” to pull back the task when swipping • Thus, let game engine calculate all movements
17. 17 What Game Engine (libgdx) Does create() render() resume() dispose() pause() Initialization Update ”object” location Draw on the surface Roughly speaking, game engine keeps calling render(). Developers need to handle different inputs to control the objects' state and switch screen (e.g. switch from menu to game screen, or game screen to game over screen)
18. 18 #2 Discussion • Todo list should not has physical meaning – Destroy the “world” – Handle animation by myself – Remove camera • Handle scrolling by myself
19. 19 Scrolling Screen height baseline
20. 20 Current Development UML MainActivity (handle UI and touch event) TaskManager (handle tasks – creation, Deletion, etc.) AnimationManager (handle animations – step forward every animation) SoundManager (handle sounds – play sounds)
21. 21 AnimationManager • Supports transitional animations only • animationManager.step: – For each animation • setX(calculateNewX(getX(), getEndX(), getStartTime(), getDuration(), currentTimeStamp)); AnimationManager Animation + step() * + getX() + getY() + setX(int) + setY(int) + getEndX() + getEndY() + getDuration() + getStartTime()
22. 22 SoundManager • Store all audio resources needed • Play using libgdx audio modle – Sound • for sound effect, e.g. a zombie's head exploding. • usually short, in the range of seconds • are loaded and decoded to RAM – Music • for longer sounds, e.g. Background music • is streamed, only partially loaded into RAM – supports MP3, Ogg and Wave files
23. 23 Libgdx Discussion • Pros: – Multiple platforms support • HTML5, java/desktop, Android – Can do testing on Desktop • Cons: – Not much unicode support • especially for output (major problem, still solving) – Not easy to integrate with native system • eg. hard to add extra views
24. 24 ~ Q & A / Comments ~