More transition Ui

I added lots of stuff over last few days.

• Resizing handles on start and end position.
• Easing drop down works
• the slide between start and end is working
• editing of Delay and Time works.

I need to add a rotation handle, this will be a fair amount of work because I did ot consider what rotations would do to resizing handle code. Unfortunately just putting the resizing handles on an object and letting rotation and resing be handles by rotating and moving underlying object did not work because, the images of the handles go messed up even when I tried applying inverse scaling on them. After the rotation code I need to change the slider to handle delay and duration effects.

The panel is looking fuzzy nee to find out why. Maybe need to start with larger font/

v0_0_7

UI for transitions - positions

I attached the drag code for start and end position markers and hooked it all up the display panel and the first art panel. To test it moved the green and red markers around then hit the first then second button and it should move from green to red. Need to hook delay, time and easing. Then scale and rotate.

Also aligned xyz between GUI and art frames so I can use same mouse click/finger touch code for both. Switched to using FingerGestures asset. It has nice finger gestures and well designed code so I think it will be easy to to twisting and resizing with it. Did some Gimp work so the start and end position markers can show orientation and made them boldier so the still show after being reshaped. Need to something similar for frame that show screen size.

v0_0_6

More UI for transitions

Found my bug with NGui, the atlas for images also needs to include fonts. Although NGui works with fonts in a separate atlas using two atlases causes Z level drawing problems.

Working on UI helped me realize a better way handling transitions, that will be flexible enough for rest of prototyping I think, hopefully even into the product. I played with the base orientation along xyz axis.(which is why everything is upside down) This will take a bit more work. I want NGui, user expectations and rotating through angles along multiple dimension to all work together. The user expectation is most flexible because I can swap axis letters when displaying co-ordinates to users. If I have to I may be able to swap co-ordinates for NGui but then I won't be compatible for upgrades so need to do it in extension, could be pretty messy. When rotating an object in 3D rotating about X then Y is not the same as Y then X . I want user to be able to twist an object on screen and only change one axis angle value. I think if I lay my object out "flat" correctly this will work, but need to test this. I see in the demo that the way the 4th panel moves has changed when I changed global orientation. How to let the user control this will be a UI problem.

Green and red frames represent start and end of transition. Moving them changes panel numbers, but this can only be done in editor. i have to write the drag, resize and twist code for run time still.

Almost finished refactoring transitions.

V0_0_5

UI for transition panel

UI for transition panel is almost done for first draft. Tested in browser instead of editor and found a display problem fixed it, did some more work on panel and it broke again. I though I had found the cause but more testing of NGui today.

Last night I went to an entrepreneur talk and networking event. Talked a bit about the project with people and realized this morning I am over geeking the design. I do not plan on removing any of the features I planned but I will need a new dead simple setting automatically does transitions with user only placing art work in final position. The simplest one will let users give a single size and import artwork as all whole pages and produce the manga. Probably 80%~90% of artists will use the two simplest setting. The manga produced by the simple settings will be same as by advance setting so artist can use simple settings and then tweak with advanced settings.

v_0_04

Seperating UI for touch and mouse.

Have played a little with the UI with fingers and mouse. I think the multi coloured gizmos will work good on computer with mouse. Fine control and no twisting make them a good fit. although for 2D placement drag and drop instead of gizmo will be my first option. For touch the multi finger twist and pinch means the gizmos are not needed. so that means using #ifdef compiler directives to separate the two interfaces, and "Finger gestures" packge by fatalfrog.com on unity.

The FPS counter showed 30 FPS on iPad and iPhone 4 which is max frame rate on those devices. on a iPhone 3G with iOS 4.x the frame rate dropped to 20 FPS for the mesh deformation in panel 3. That would be too slow for general performance but for worst case on 3 year old phone that is fine. I am not going to worry until frame rate gets down to 25 on iPhone 4.

I think I know how I want to do the popup panes for control position and transitions of panels, from UI point of view, but first I have to change the animation system. Currently there is no central control of animations so I can not stop them all anytime. I need to do this when reseting or moving all frames to final position in composer. This is exactly what JobManager.cs what meant for.

Started on pane for editing transitions but need to do some more work in gimp first making some graphics.

v0_0_3

MangaPad First Draft UI and internals datastructures.

I don't really know how much I want MangaPad to be capable of in the first release version. So there will be the usual tension between wanting to make my software to general and worry I'll make a lot work for myself later if don't make general enough. Since like most programmers I tend to make things to general I will be trying hard to keep it minimal.

I am writing this in Unity3d so there will only be a single source for both browser and iPad.I don't know what it should do or how the UI should look. So first off I will try and get some minimal UI up that works on browser and maybe iPad. I started by refactoring the data structures to be cleaner. The third panel has a fancy transformation of the panel from a sphere to flat, I will leave that in but not refactor it yet. First I will just work simple transformations of location, rotation and scale. I found a library on the Unity Asset store for $15 that makes a UI for those. It is in JavaScript, and has mouse clicks hard coded in (so probably won't work on iPad) and does not work with an orthogonal camera, but only $15. So I have have included it will use it for testing the feel of its UI. If it feels good I can recode to c# . I also changed my camera to perspective but moved it far away and reduced its field of view to 5º so it looks orthogonal if I keep everything in the same plan.

I am also using Prime31's opensource UItoolkit code heavy modified for the panel transitions. I think I will use the opensource JobManger code too. I plan to use NGUI for the Composer GUI. The fancy transitions are done with Mega-Fiers which is great mesh transformation code. I hope it is not to heavy to use lots of it at runtime on an iPhone.

Getting some artifacts on the screen when I rotate or scale the panels. I wonder if shaders (main becuase that is the code I understand the least, so I always suspect it). Turns out not to be shaders but a second GUI camera I have does not have the right culling masks.

Added a FPS count (frames per second) so I can also track performance on iPhones.

version 0.0.2

MangaPad new sideline project

OK the plan is blog a a project from start to finish. I will also post links to prototype of the software. The most current version will be found at Ryuuguu.com

I first though about a manga program 2 years ago but it was only one of many ideas. Then I looked at some of the tools I had seen coming out recently and thought I could do a good manga composition program with these and it would run fine on an iPad or browser.

First I looked around for what manga iPad apps were new. I had looked a couple years ago. I did not see anything like what I wanted to make but I did see one that had a similar end product. The idea behind Manga pad is that it will allow artists who already have art work in digital format to compose panels in to scenes (like pages) then publish this to iPad or browsers. Each panel would also have a transition. Such as sliding in from the right. Looking at my prototype will give you an idea of what I mean. Press the gold button at the bottom to go to next frame. The original manga KinyuRival is by a friend. The app I saw was by CyberManga and is also called CyberManaga (app). It also has voice actors and is multilingual something I had not considered. Also I saw on their website that they are interested in making a manga composer for PCs aimed at independent artists. There were no updates about the composer software so I contacted them and got a friendly enthusiast reply from Kohei Nishino. He is a professor of managa at Kyoto Seika University. Since April is the start of the school and business year in Japan it is a very busy time. Hopefully we will meet when things have gotten less busy.

Next post I will discuss some of my first draft UI design ideas.