Time is short as LexiConquest nears completion. Major things to look forward to at this point are the Library Node and the Cards which were ordered last week.
Mike – Worked on Composites, Announcer V/O, Game progression outline
Ben – Went to War with Shave (and survived!), Rendered Billy, Spell card art
Hessam- Worked on the library, and contact forms of the site
Jason – Game outline, LIBRARY NODE, animations programming, attack Desc programming
Lauren – Re-rendered Tiny Tim’s animations with hair, did final edits on cards, adjusted Hp bar design
Tracy – Re-rendered Frankenstein’s Lightning, Rendered more flames for Graveyard Daemon, worked on fixing Deus Ex Machina in post & composited all of these. Minimally worked on coding while rendering was happening. 14.5 hours @ 90%
This week I spent all my time on the websites only. The goals were to complete the Library section, and work on the Contact forms. Both tasks are done plus some few more things. Let’s get into details:
As I mentioned last week, I had no idea how to deal with the Library section, and finally I came up with a very awesome idea for the Library. First I wanted to create a thumbnail for each book, and provide a link to Amazon.com for each book. After playing around with Google Books I decided to link to Google Books for each book, and then with the help of Javascript, and the mighty jQuery, I came up with a nice interface for the library section. Now, we have thumbnails for each book in the library section, and when you click on them, the embedded Google Book will pops up in a window, using jQuery, This is a very nice feature from Google that allows developers to embed the books into web pages without any logos or distracting elements on the page. In our case, I am using an iFrame and Drupal Lightbox 2 in order to add the book to a pop up window. This way, the users will not leave the website in order to read the book, and they can close the book anytime they want, and come back to it later. I am very please with the overall look of the library, and especially with its usability. The library took almost 11 hours including designing thumbnails for each book, development, and coding, and the reult can be seen here:
Second, I had to work on the contact form for the site. Making a simple contact form is quite easy in Drupal, but I wanted to create a contact form in a way that the audiences will be able to send message to any of us that they wish. The solution was easy after finding a module that allows making multiple contact forms. The rest of it was done through some PHP coding that I found in Drupal documentations. the code below, generates a list of the contact list in the main contact form of the site:
<p>Who would you like to contact?</p>
<?php
$result = db_query('SELECT * FROM {contact} ORDER BY weight, category');
print '<div id="contact-list">';
print '<div class="item-list"><ul>';
while ($contact = db_fetch_object($result)) {
$cleanurl = str_replace(' ', '_' ,$contact->category);
print '<li>'. l($contact->category , 'contact/'. $cleanurl) .'</li>';
}
print '</div>';
print '</div>';
?>
I spent 5.5 hours on the contact form, including adding style to its markup.
Finally, I spent few hours addressing issues that Ted kindly brought them up last week. I totally agree with the comment about the font that we used for the navigation menu, that is not very readable. As I stated last week, because I’m using a Javascript called Cufon to generate the font, it’s impossible to add line spacing for better readability. Instead, I used a CSS font generator, and added some letter spacing, and I believe it’s more readable now. The only problem with this method is that IE6 does not support this type of CSS font. The other comment was about the font that I used for the secondary nav (about, contact us and login links) and small numbers for home cycle gallery. It seems like Verdana is an accepted font for secondary nav by most of the web developers, and to be honest I don’t see any irregularity in thematic look of the site, because they have different functionality. But for the sake of consistency, I replaced them with Georgia. The last comment was “Once one of the accordion selections is made, how does user return to main page?” I’m not sure if I understand the question, but the answer is simple, they return to the main page by clicking on the “Character” link in the main nav, and if they wish to go to the home page, they simply click on the LexiConquet logo.
The last thing I did was to add some CSS 3 attributes to the gallery page to make them look prettier, and hide the description for each gallery, as Ted suggested last week. As you can see I used the drop shadow which is a new attribute in CSS3, but unfortunately IE6, and I believe IE7, does not support CSS3, and only modern browsers support these new attributes (like round corners). So, it’s a nice feature to have for those who use modern browsers, like bonus, and users with old browsers will not see the drop shadow effect which is not a big deal. After all people must upgrade to the latest for the sake of improvement, and we can’t keep waiting for them! Here’s a snapshot of this CSS3 feature:
Total Hours: 17.5 Total Percentage: 100%
Goals for next week:
The site is done! My goal for next week is to collect the materials needed for the site from other members and start populating the content. Then I to install a spam filter for the forms, since they are open to public now. Also, for the character page I decided to use a banner image, and have our character poses in front of camera, and we can use this as a poster for the project (of course with more design elements) So, I will spend some time next week on designing this banner.
Week five was another busy, and successful week for me. As promised on my previous post, I finished all the renderings, and worked on the websites. Let’s get into details:
3D stuff:
First of all I had to finish the arrival animation, and to do that I had to combine the book animation that Mike worked on, with the particles effect from Ben and my animation. It took few hours to set up everything. I finished rendering all the animations, shadow passes and the camera movements. Also there were few problems with some of the other animations that I rendered last week, and I had to re-render few frames for each. I am done with all the animations, shadow passes and compositing each animation. Below are my final animations:
I tweaked our theme a little bit and added a frame that matches our game’s interface to the main container of the website, a quick design, and a quick change to the CSS, and you can see the change in our website: http://www.lexiconquest.com
Then, I worked on the sample quizzes page, and again, the plugin that I used for the template last term didn’t work in Drupal! (due to the version incompatibility of jQuery that comes with Drupal 6.x) With the knowledge that I gained from making the accordion effect, I quickly wrote this jQuery script for the sample quizzes page
$(document).ready(function(){
$(“.accordion dd”).css ({
“display”: “none”
});
$(“.accordion dt”).hover (
function () {
$(this).addClass(“hover”);
document.body.style.cursor=”pointer”;
},
function () {
$(this).removeClass(“hover”);
document.body.style.cursor=”auto”;
});
Here is how it works. When the pages loads the scripts hides all the dd tags that contain the answers by setting the display attribute to none. Then it adds a class “hover” to the dt tag (question) that the user hover over. Finally the rest of the script adds the slideDown, and slideUp effects (which are jQuery APIs) to each dd tag that has the class “hover,” and hide whatever that is open. Also, I added the “hand pointer” as a cursor style using one of the jQuery’s API, so the dd tags look like links. Simple! and you can review it at this location.
After that I spent half an hour to add the remaining galleries for the characters. Last week we have only two, and now we have all the galleries and they are ready to upload images.
Finally, I spent a lot of time browsers testing that I hate the most! Since I don’t own a PC (and no parallels), and the computers in the lab don’t have IE 6 and 7 installed on them, I had to use Adobe Browser Lab. Unfortunately over the last week, the Adobe team was upgrading the system to their new CS5 browser testing system, and the service was down till Friday. (and sad news, they offer the free service for one more year from now ) The other problem was that the conditional statements for IE provided by Microsoft do not work with Drupal! First I tried to add the conditional statement for IE6 and 7 to the page.tpl.php, but that didn’t work. I spent some time to get it to work, but after doing some research I found that there’s a module that does the job nice and easy, and with this module I was able to target any version of IE that I want. Now we have two different CSS files for IE6 and older, and IE 7.
Here is how the site looked like in IE6 :
As you can see IE6 does not support transparency, and I had to use IE PNG FIX that I always use for any website, but here’s how it works in Drupal:
For some reason, the script is not able to locate the blank.gif file (this file is necessary in order to fake the transparency), and as a result, some of the PNG images do not show up. Again, I tried different modules, and finally I found a module called PNG Behave, that works perfectly. Lastly, as you can see in the first screenshot, the primary navigation buttons were broken i E6, IE7 and Safari 3 (windows version,) and the reason for that was, in order to line them up perfectly I had to use “display: inline;” on the li tags, and this attribute cancel out “display:block;” for for the a tags inside the li tags. For IE 6 and 7 I could just over write the CSS, but for Safari there is no way to target that specific browser (or maybe there’s a way?) It took me a few hours to come up with another approach. The solution was to change the structure of the primary nav in the main CSS, and instead of using inline attribute, I used “float: left” for the li tags in order to line them up in one line. Finally I fixed the problem with the banner background picture (the books in the header above the nave) in IE6, and the site looks the same in most of the major browsers as follow:
IE6+, Safari 3+, FF 2+ and Google Chrome
Hours: 8.5 Percentage: 95%
Total Hours: 17.5 Total Percentage: 97%
Goal for next week:
I am pretty much done with the animations, but just to be on the safe side, I will reserve some few hours in my schedule for any potential improvements in the animations. I will also spend the entire next week to finish up the final touches on the site, the Library section (which still I have no idea what we’re going to do with that section) and finally will write the content for Robin’s profile page.
Things are starting to really come together. We planned on finishing our rendering by this week and moving everyone into compositing, in the coming week. We are also planning to orders the physical cards this week after out meeting with Ted on Tuesday.
MIKE: Finished King Arthur’s arrival animation, finished rendering. No work done on the announcer audio.
Hessam: Finished Robin’s arrival animation, and all the other renders, and composite all the animations. Worked on the functionality of the site, and browser testing. Total Hours: 17.5 Total Percentage: 97%
Ben: Tin Woodsman Compositing and Billy Pilgrim “bang my head on the desk” type technical issues
Jason: Programming ‘one button’, character glyph artwork and programming. 17 hours @ 95%
Tracy: Rendered out last spell effect (personification), implemented the Quiz game, composited the Time Shift spell effect. 16.5 hours @90%
Lauren: Put together playing cards, re-animated and rendered arrival sequence, and rendered library for attack animation. 23 Hrs, 90%
Week 4 was a very successful week for me despite all the problems that I have due to my accident. I’m going to keep this post short and go directly into breakdowns:
3d Stuff
My goal for this week was to finish the damage animation, and also finish up all the renderings. Both tasks are done, and in addition to the damage animation, I rendered all my 3 animations and their shadow passes (except the arrival which I need to double check with group before rendering.) Below is the render of my last animation, and PLEASE pardon the arrow falling out of nowhere That was a mistake and I need to mask that out.
They are all ready for composting, and each animation will take few minutes to render in the nuke file that Ben provided us. Apparently I have a problem with the quality of the shadow passes, and as you can see in the screenshot below, Nuke render the shadows with very low quality. The problem could be the version of Nuke that I am using or one of the settings for shadow passes, because when I open up any of the shadow files in Photoshop, the quality is very good. I am going to test it on Monday at school, and see what the problem is. Once I figured this out, then it is just a matter of few minutes to composite all the animations.
And this a screen shot of the quality of the shadow passes in Photoshop:
As for the arrival animation, I set up the file, and I am going to render it Tuesday after I make sure that I have everything set up correctly with the team.
Hours: 7 Percentage: 95%
Website
My goal for the website was to work on the image cycle gallery for the home page, and if I get extra time work on the Quick Facts callous. I have accomplished even more than that. First of all I changed the frames for the images in the cycle image gallery, as well as the small thumbnails so they match the interface of the game. For the cycle gallery, Instead of dealing with the blocks and custom field, I just decided to use HTML, and add them all into the home page as list items, and then I loaded a plugin for jQuery called Cycle into the Drupal, Then with the few codes that I wrote before for the template of the site, I re-created the image gallery in Drupal site. For the Quick Facts callout, I had to use a different approach. If you look at the markup of that piece with FireBug, you can see that each Fact is a div with a P tag inside it, and all the graphics (the borders) are the background property of the P tag. This way the border expand with the text. What I did was, I created a block, and in the settings of that block I set a list of the pages that I want this block to be shown. For instance, on any of the character pages, you don’t see this block. Then I added a custom field that will allow us to add our text to the markup of this callout as Paragraph tags. Pretty straight forward, but it took me few hours to figure out how to set it up.
The next thing that I did was, I used a font generator in order to add the font that we are using for the game interface to the site, and now we are able to use that file with CSS, and any computer will be able to render this font with Javascript. I think IE6 does not support this method, but all the IE 6 users need to be punished for using this awful browser. So, no fancy font for them! Now the question is, does that font work for the site? Honestly, I think it does not work for the navigation and readability is an issue here, but for the heading tags it seems fine. This is my personal opinion, and we can discuss this in the group meeting on Tuesday.
Then I added some style to our gallery page. As you can see in the screenshot below, the original CSS for the gallery was pretty simple and it was inheriting its style from a CSS files that came with the module that I used for the image gallery. This was pretty easy, but time consuming, and I had to hunt all the properties and override all the default CSS in my own CSS files.
Lastly, I worked on a profile page for all of us on the website. This website is a place to present our self to the potential employers, so I thought we definitely need a profile page for each member on About us page. As you can see on this page, I added the name of the team members in alphabetic order, with their positions in the project. When you click on each name, it will take you to the profile page for that person (Currently only I added my info): http://lexiconquest.com/user/1
After doing some research, I added a module called Profile, and this module allows us to add custom fields such as single line text field, multiple line text field, radio buttons, URL, etc. For each user I created a Personal Information block, and inside that I added, name, Website and Twitter. I am going to add a text field so we can add few lines as our biography.
If you recall from my last week post, I had to change the CSS for the navigation and other parts since I changed the class names with Javascript. Those are all done, and I added few more CSS, and the template of the site is almost done.
Hours: 15 Percentage: 100%
Total Hours: 22 Total Percentage: 95%
Goals for next week
I am pretty much done with the 3d stuff, except the arrival animation that I am going to render this week. For the website, I will work on the Sample quizzes page, and finish that up, and do the browser testing in IE 6+, FireFox 3+ and Safari 3+. This alone can take so much time trying to address the issues on each browser. If I get extra time I will work on the contact page. As for now, I have no idea how I can accomplish a contact form in Drupal and I need some research on that as well.
Ben – Designed book opening visual effect, finished Tin Woodsman’s Arrival Animation, Billy Pilgrim’s Attack
Hessam – Finished damage animation for robin, and the left over renders. Worked on the Image cycle gallery, quick facts callout, user profile page, style for the gallery, and generating font for the website. Total hours: 22 Total Percentage for both the site and 3d Stuff: 95% accomplished.
Jason – Tripod renders complete and all ready for compositing. Defending implemented in code. Hours: 19 @ 95%
Mike -Worked King Arthur Arrival animation, finished the final Book animation continued rendering. 17hrs @90%
Lauren – Finished rendering attack animation character layers, reworked particles and attack animation, animated and set up render for arrival. 19.5 hrs, 85%.
Tracy – Finished rendering 4 of the 5 spell effects and their library backgrounds – they are ready for compositing. 17.5hrs @ 80%
Mike – Finalizing Book Animation/Integration, Finish King Arthur’s Attack, King Arthur Rendering
Hessam – Render preparations, tweaking animations, and fixing new issues. Working on the navigation of the site and image galleries. Hours 29.5 – 90% of the goals total. 80% for the 3D stuff and rendering, and 100% for the website.
Lauren – Edited scenes for render, created new shave hair setup, began rendering, finished card art and finalized UI screens.
Tracy – Preparations for rendering, rendered most of Graveyard Daemon (the rest should be complete and on campus waiting for me!) and rendered Time Shift. The rest are still in the works. Basic coding tweaks while I wait for final artwork for the in game menus. Hours – 16.5 – 80% of my overall goal (100% of my programming goal since I didn’t set out to complete a lot this week and about 75% of my 3D goal due to long render times).
Week 3 was a very busy and productive week for me. I had a very bad accident last week, and I had to go to different body shops, dealing with the police and insurance, etc. But this is not an excuse, and all the job is done, and project is moving along. (If you are curious what happened, my car was parked, and it started to move down in a drive way and hit a house, and apparently the owner of the house is making a great deal out of it.) Let’s get into the breakdowns:
3D stuff:
As I mentioned in my last week’s post, we were planing to render. There were some changes in the files, and I had to do a lot of tweaking on my animation, and that took most of my time last week. I set the right scale and position before starting animating as you can see in this picture from last term’s post. So, I had to scale down the character, and there were some issues with the rig that didn’t let me to scale and rotate the character properly. Jason helped me out and it’s all good now. Because of these changes, all the accessories that were attached to Robin’s Hood, needed adjustment and in some case re -animating. For example for my Defeat animation, when Robin let go of the Arrow, his bow would jump to the place that it was animated originally, so I had to animate the bow again, and it took me few hours to adjust everything. For my attack animation, Ben suggested me to add some effects for consistency with others. I decided to add a fire effect to the arrow, and that required extending the length of the animation. I added 3 more seconds when he pulls the arrow so the fire effect is long enough to be seen. For the fire effect I used Maya Fluid examples and tweaked it until I get the result that I want. I spent roughly 8 hours to redo the second half of the animation plus the effect. Here is a short test render of the effect:
I have finished rendering the defeat and the default animation, and as I am writing this post the attack animation is being rendered (almost half way done!.) Below is a render example of one of the shots:
Due to a miss-understanding, I have to do one more animation, which is fairly easy. I thought Robin does not take damage and therefore doesn’t have a damage animation. I will animate this, and render it along with the Arrival animation, which is also ready to go. I also need to render the shadow passes, and I think they should be pretty fast.
Hours: 15 hours Percentage: 80% (of rendering)
Website:
The website took most of my time this week, and I had some good progress. There’s a learning curve for Drupal, and once you pass that, you are going to be fine. I am glad that I chose Drupal platform for this project, and I am learning a lot. As you may recall, I had a problem with getting the accordion effect to work in Drupal. As I said there are some modules for the accordion effect, but none of them meet our need. After spending some time with JavaScript, I decided to give jQuery UI module a shot. JQuery UI is an official plug-in from jQuery team that handles many of the modern effect for web pages, including accordion effect. Unfortunately, after 2 hours of trying, due to the complicated mark up of Drupal, and version incompatibility of Drupal’s jQuery and the available UI, I gave up on it. The problem was, it treaded the child menus the same way as as the parent menus, and made them nolinks. So, when you click on a character’s name, the child menu would expand but they wouldn’t functioning because jQuery UI would remove the links from them (just like the parents.)
I returned to writing my own code again. I didn’t get any useful feedback from Drupal community in my post here, and after a lot of tweaking, adding and replacing different functions, I got it to work!! you can track the progress of my work in this files, and as you can see I commented out each approach. This is how it works basically:
When the page loads, a function hide all the child menus, and remove the href attribute from Parent menus only. I replace the link provided by Drupal with anchor tag with this line of code:
$('li.expanded > a').attr("href", "#");
The only problem with this method is that you would get an anchor tag in the address bar which is not a big deal. Then another function adds a HTML class to the selected menu, and slides up the child items for the clicked menu, and another function remove the class and slides down all the expanded menus. The tricky part was to order of these functions. Then I added two more line to my code so everytime you go to a page, the child menus of that page remains open. For example when you go to the Billy Pilgrim’s profile page, the Billy Pilgrim’s menu is expanded upon the loading of the page. These two lines do the magic:
Because I added some custom HTML classes via Javascript, some of the CSS attributes such as the hover states for the navigation and the typography are gone, and I need to modify the CSS a little bit.This took me about 7 hours, and you can try it out at : http://lexiconquest.com/characters.
My second goal for the website was to create an image gallery for the Gallery page. As far as the image galleries are concerned, there are many ways to do it in Drupal. This the path that I chose after some research:
First I installed the Content Construction Kit module that allows me to create custom fields for drupal. One of these fields is the upload field that is required to submit an image to the site. Then I found a wonderful module called simply “image” that allows us to crop and generate thumbnails, and creates image galleries. Using the CCK, I created a node and use that as a dummy for these galleries. Then I used Thickbox module, which is pretty similar to Lightbox, and set it up for each gallery that I created. Right now I created only two galleries for Billy Pilgrim, and King Arthur, and for now I just used some of my photography as placeholders. If the time permits in future, I would like to spend more time in order to create even more advanced galleries, but for now this should be fin. You can preview the gallery at the link below, and please keep that in mind that there’s no CSS style for this gallery yet!
Lastly, I spent one hour for content population. For each character I added three sub pages; profile, Card Strategies, and Sample Quizes, and for each page I generate the custom URL and path.
Hours: 14.5 hours Percentage: 100%
Total:
Hours: 29.5 hours Percentage: 90%
Goals for next week:
My goal for next week is to finish the last animation for Robin Hood, the Damage animation, and then finishing all the renderings of the animation and shadow passes, and composting them. For the website I will work on the cycle image gallery for the home page, which I have no idea how to deal with it! and If I get extra time work on the “Random quick facts” call out which is another concern for me.
Another week of animating and coding. My goal was this week was to finish my last piece of animation, and adding some functionality to the site, as well as cleaning up the codes. Let’s get to breakdowns:
Animation:
The last animation for Robin Hood was his attack animation, and the only reason that I left this for this week, was its complexity compare to the other ones. In this animation I had to make some hard poses with my character that relied heavily on the motion of his shoulder (the weakest part of my rig.) For this animation I had to change the weight as I was moving along, and sometimes I had to go back and fix the earlier part of the animation. Also the movement of his bow and the arrow took me some time. It’s about 9 seconds and roughly took me 10 hours of work. Here is the result:
As I stated last week, I had to change the page.tpl.php file for our theme to a more standard format, and just as I expected it didn’t take that much time, about 1 hour. Second, our navigation needed some improvement in the css. Drupal comes with lots of default css files known as system.css files, and they set the style for its complex menu system. That means they override my css file, and add extra padding to the style.css. Drupal menu system has lots of list elements nested inside of each other. You can simply run the firebug on Firefox and you will know what I mean. M job was to hunt those styles and reset them. This took me 3 hours to find those styles for the menus that were causing the extra padding and default styles. This piece of code that I added to our CSS resets all the default styles in Drupal:
And lastly, I was planing to write a Javascript in order to add accordion effect to the menu. Before that I tried two modules that I mentioned last week, but they both failed, and that’s why I had to wrote my own jQuery script. My first attempt was to first hide the expanded items inside the UL parent initially, and then add a function to make them visible when the user hover over them, and add another function to hide them when the mouse is over, after spending some time I came up with the following:
However, this didn’t work, and every time I hover over the navs they keep expanding and collapsing, Then I did some research on jQuery website in their useful Event page, and after some attempts I came up with the following:
This one actually works, but the problem is when you click on the first character in the list, they all expand! you can try it here. The problem is all the UL and LI elements in the nav has the class name if you have noticed in my code, and the effect applies to all of them. I am not a Javascript person, and maybe I should approach this with a different method. I will try to set up an appointment with Jervis and ask him about it. Another solution is to add custom class to each UL, which I don’t know how to do it in Drupal. I already tried this method and it didn’t work, and I also tried this module for custom classes, and yet no luck. I spent about 4 hours trying all the above. So I will try to meet with Jervis to get some advise, or spend some times to find a way to add custom classes. I know it’s doable, I just need some times to do some research. Unfortunately, the 3D part of this project took most of my time last two weeks, and I couldn’t really focus on this. Hopefully this week we will start rendering and then I can focus only on the site, just too much things going on.
Hours: 8.5 Percentages: 80% (The script is not fully functioning)
Goals for next week:
As I mentioned we will start rendering (Wednesday night,) and we need some preparation for our scenes, so I guess I have to spend some times for that, and then I can start working on the sites. My goals for the sites are to get the accordion effect to work properly, and then start working on the Content Construction Kit in order to add custom galleries for each character. I think this requires around 10 hours by itself.
We have a lot planned in the coming weeks, highest on the list being finishing the project of course.
This Wednesday, the Biblionauts have scheduled an “ALL NIGHTER” (dun dun dun!) in which we hope to complete a large percentage of our rendering. Because most of our animation occurs over a relatively low number of frames, there’s shouldn’t be any issue completing most of what we need done. By being in one room over a set period, we will be able to ensure the most consistency in terms of lighting, camera angle, etc. And if any problems occur, there’s a large support group ready and willing to troubleshoot issues. Hopefully, when all is said and done early Thursday morning, we will have made amazing progress and will be able to move into paying attention into the next step of the project, namely the printing of the physical cards and the game programming.
But enough of that and onto what we did this week:
Mike: This week I worked on more of King Arthur’s animations and the Book for the intro animations.
Ben: Library Arena completion, Tin Woodsman attack and render passes, beginning of Billy Pilgrim animation
Jason: Defeat and arrival animations for Tripod. Attack button programming to check maneuver requirements. Hours:14 % complete vs. anticipated: 90%
Hessam: Attack animation, and working on the site (cleaning up the codes and add the accordion effect to Drupal) Hours: 18 hours% complete vs. anticipated: 80%
Lauren: Attack spell and animations, arrival animation, card render and finalizing interface. Hrs: 22.5, 90% of weekly goal complete.
Tracy: Main menu coding, reading PDFs into flash, card navigation, fixing Time Shift animation and editing Frankenstein’s Lightning animation. Hours: 17 % complete vs. anticipated: 88%