[Ciel Devlog #08] Closing The Gameplay Loop

Hi, back with me again, num, at our devlog #8 on Ciel Fledge. In case you didn’t notice the devlogs so far have been written by various author with different responsibilities within the team such as programmer, music composer, and game designer. You can read the previous blogs here!

In this devlog I want to talk about our current progress so far and how close are we to finishing Ciel Fledge core gameplay loop.

Progress Review

For the past few weeks, I have been working to make sure that every characters portrait has their own unique gesture to be animated! So dialogue won’t be as boring with the characters only moving their lips with one portrait. Now, every characters have their own body gesture, not just facial expression

Various character portrait gesture.
Character interaction mock-up

 

Aside of portrait designs, I also worked on overhauling most of the game menus to look pretty and consistent (much to the lead programmer dismay), also most importantly, to be intuitive enough that makes the player understand it quickly and easily.

The chaos in the battle technique menu.

 

Battle technique in action!

 

Wrapping up

With all the gameplay core at its simplest almost ready. My workload is now getting a bit lighter. Mainly it’s just making sure that the programming side works as intended with the design mock up and also “beautifying” everything, graphics wise. Looking for oddity in design, inconsistencies in portraits, wrong resolution and artifact in images.

Also, with all the gameplay, technical, and boring stuff in general tackled now. I can focus on actually writing the game’s story and character dialogue/interactions. The part that is largely untouched by the team.

The new character creation summary

 

Conclusion

So, actually I want to write more, but writing devlogs is quite a struggle, especially if you don’t have anything important or interesting (but need to do it anyway for all that views and exposures). Since I don’t have any interesting stuff to write anymore aside of the above writing, I’ll just conclude it here. I hope you enjoy reading this rather short devlogs. See you in the next devlogs! (spoiler: demo soon!)

Also don’t forget to follow us on the social media for more updates!

Instagram

Facebook

Twitter

Tumblr

 

[Ciel Devlog #07]The Importance and Complexity of User Interfaces

General Development Progress

Hi, RikuoTanaka here!

Sorry for being a bit late with this devlog, I am busy with exams this week and the previous one.
And thanks to that, I have to take a break from development for now.
Don’t worry though, as soon as the exams are over, I will jump right back in!
Even without me, it is progressing smoothly, as far as I can tell.

As far as my work goes, remember the Schedule Menu that numfank showed a few weeks back?
While he complained that it looks too complex, I think it looks fine back then(but then again,
I never really complain about any design he does, so… yeah).
Well, since then he redesigned the menu multiple times, which I implemented into the game.
And I have to say, it looks a lot better. Take a look yourself!

The button styles are now in tune with the rest of the other menus, and the information they provide are now easier to read as well. I have to give props to numfank for the new design. It really looks beautiful.
Oh, and did you notice that text at the bottom? From now on, every time you hover a button in the game, a neat little description will pop up to explain what it does! Like I said before, every small details count.

2 weeks ago, wltr3565 showed the Status Menu with the new icons.
What he didn’t show however, was that the sub status menu also gets a similar treatment.

Similar icons to help distinguish between different types of skill.

The team has now started working on the new techniques menu. What does it look like? Find out in the next 2 weeks.

Why UI is important

So, with all of that out of the way, let’s talk about something else.
Last time I discussed about the work that I do in Ciel, that is managing activity parameters.
This time I would like to talk about another aspect that I am working on, and that is the menus, or more specifically, User Interface.

Back in High School, I used to think that the most important aspect of a game is the gameplay system. That is, as long as you get the gameplay aspect fun, everyone can enjoy the game(specifically regardless of the graphics).
Nowadays, I understand that not just the gameplay, but every single aspect of a game is important.
Graphics that can define the setting and theme of the game, music and sound effects(or even lack thereof) that can set the tone, and of course, the gameplay system itself.
With this in mind, it’s not so much about whether graphics are important or not, but rather what kind of direction you want the graphics of a game to be, and whether it is appealing and consistent with the theme or not.

User Interface, of course, is one part of the graphics. How you design the interfaces will certainly affect the feel of the game, albeit in a smaller scale compared to other aspects of the graphic.
Now designing the interfaces is one thing, implementing it in the code is another.
And I have to say, sometimes I feel very tired by just implementing them. It’s not that I don’t know how, but rather there are so many things to consider. The placements, length of text, animation, and so on.

And it is certainly not pleasant when you find out the result of your code to be not what you’re looking for.
Especially since sometimes it takes a lot of time to compile the code and check it in the first place.

Prime Example of UI Done Right

All of those, and add in the fact that when someone talks about a game, the topic of its user interface rarely pops up. And when it does, usually it’s because the menu is designed poorly or not working properly.

Basically, no one talks about the User Interface when it’s good or okay.
…But then came Persona 5. And its gorgeous looking menus. Especially the battle ones.

I’m sure a lot of you know what I’m talking about. And that’s the thing. All of a sudden, EVERYONE was talking about the game’s user interface! And it even became a popular meme! And it’s not broken, that’s for sure!

The thing is, even before the game was released, I already looked at the battle menus from the trailers.
And even back then I thought it looked awesome. I can hardly find a game in which menus do not follow the traditional square(or almost square) shape design, and looks stylish, to boot.
Like I said, design is one thing, implementing is another. I already have some trouble implementing the menu design Ciel Fledge uses, so imagine my awe when I think about how the programmers implement that kind of stylish menu.
There should be a ton of things for the programmers to consider. And I imagine plenty of trial and error as well.

Lesson to Take

Looking at that menu made me realize that there is still a lot to learn for me, as a programmer.
It made me think, “THAT’s the standard required for a professional programmer these days???”
But I guess I can’t keep feeling down about that sort of thing. I can only keep moving forward, alongside the team.
Who knows, maybe there will be a time when I can implement the menus that Persona 5 has.

…The music of Persona 5 is awesome too, by the way. YOU NEVER SEE IT COMING….

And I guess that’s all from me! Sorry for the longer devlog than usual. I promise the next one from me will be much, much shorter.

This is RikuoTanaka, signing out!

[Ciel Devlog #06] Holy Sword Excalibur -Slice System Up Edition-

Hello again, wltr3565 is here! Back again for writing a devlog for you guys! Let’s ask Excalibur what we have been slicing and splicing in the system.

 

Icons placed beside the gauges.

 

Icons added, several elements added, etc, etc, more visual aids to ease your number reading. But gladly, we have managed to add more sets of expressions for the characters. I really like numfank’s work here. However, his work is far from done!

Just changing faces won’t do justice!

 

Oh yeah, some minor stuffs too, like, Ciel won’t be just hanging out in the same room all the time again. But to be frank, this doesn’t add much. There are plans to add more, but urgh, please, no more!

 

Peek-a-boo. Where is she?

 

It’s about time for us to really prepare for the content, though. It’s the real meat of the game, after all. Bye-cha.

[Ciel Devlog #05] The Music of Ciel

Hello there, everyone! This is Jasmine Cooper, the composer for Studio Namapaa’s Ciel Fledge. I’m here to talk a little bit about Ciel’s soundtrack! Having worked with Studio Namaapa before, I already knew that their vision for the music would be something unorthodox and out of my element. Cue: Excitement!

Ciel Reference Tracks

A lot of references have been pulled from late 70s/early 80s anime, 70s disco, and future funk, just to name a few influences! Here are some examples:

  1. Dog Fighter (Superfortress Macross)
  2. Galactic Funk (Casiopeia)
  3. Dance in the Memories (Kimagure Orange Road)
  4. Always You (Votoms)

(And a reference playlist for those interested in this style of music: Ciel Reference Playlist)

Hardware, DI, and a state of the art hydration system.

Soundtrack Ideas

With this being a daughter raising sim, ideas have centered around different styles associating with your daughter’s age range. The first link, more posh and refined, would be for adulthood, Casiopeia, a more renegade style, for the teen years, and boppy, synth pop for your daughter’s younger years! As she grows, so does the music.

Preparation

My time has been spent listening (as intently as possible), researching chordal structures, recreating pieces, and trying to get an idea of the sounds I want. Synthesizer timbres, looking for live musicians to play, experimenting with guitar timbres, bass playing techniques, hall sizes and re-creating mixing styles – A whole slew of exciting nonsense that I hope translate over well in the final product! So far, my first venture has been trying to create a theme for the character creation page.

~~
Whenever I write music, I try to roleplay as best as I can. I attempt to immerse myself in the world of the game, whether that be ask for descriptions of the times, read notes, study artwork, as well as listen to references. If I want to evoke a sense of an environment (let’s say, rain), I’ll find a soundsource, put it on, and try to compose with that environmental sound playing in the background. I attempted to put those practices to use as I worked on music for the character creation screen.

Vega and Grace, prominently heard in the Character Creation theme.

The Making of the Character Creation Screen

(Disclaimer, all excerpts are W.I.Ps and do not reflect the final version)

For the character creation screen, I wanted to drive home some of the underlying currents of the story behind Ciel that the player isn’t cognitive of, but also give the player a sense of mystery. They (or you!) are entering a world they know little about, albeit having been a component of that world for many years. The goal: Give the player a sense of the setting while also exuding a heavy influence from the musical styles linked above. I had two initial ideas for the character creation screen..

~~
1. Character Creation #1 

(Inspired by the ending [1:31] of the first link posted above. GORGEOUS, RIGHT?!)

~~
2. Character Creation #2 

.. and they were both flops. Although Alfi liked #2, Riku, Walt, and I felt that the theme was too cheery, and we unanimously agreed that #1 was too serious.

I tried for a third attempt, taking into consideration the period, time, atmosphere, and a small idea sparked by this piece (primarily from the section at 4:47): Beautiful Dreamer

~~
3. Character Creation #3 

This one was much closer to the emotions I wanted, although a couple agreed that it was still a bit too cheery. Knowing that, I pushed out another idea, or a section iteration, to see what the guys thought. Riku gave me a fantastic mood reference with a Pokemon track: Welcome to the World of Pokemon

More netrual. K, gotcha.

Virtual software that I use primarily for my string sounds (along with layering other vsts and sounds)

A bit more tinkering and I came out with this:

4. Character Creation 3 version 2 

And ended up having a rather robust ending! After a couple more intense listenings, I felt that any resize in tension or emotion should be saved for a scene fitting such a need, i.e., not the character creation screen. The consistency of the snipper clips soundtrack drove that home for me: Snipperclips Main Theme
I felt that I pivoted and built a *bit* too much (at least for this particular version), so I opted on trying ONE MORE tangenital idea and…

5. Character Creation 3 version 3 

I ended up with what will now be the official “sketch” of the Character Creation theme (minus a few minor, but major sound edits and some mixing)

Well, I apologize for the unapologetically lengthy post, but I hope seeing the ins and outs of one composer’s techniques enlightens, or even comes off as mildly interesting, to some of you!
Thanks for reading/listening, and look out for the next Ciel Fledge Post!

Last but not least, don’t forget to follow me on twitter and check out some of my other work here!

[Ciel Devlog #04] Building Shop Menu and Interfaces

Hi, it’s num. Back again with Ciel Fledge bimonthly devlog with me.

Building shop menu to buy/sell items and equipments

For the last two weeks we are working to build shop menu where you can buy/sell items and equipments. It’s nothing fancy but we are trying to make it as simple and intuitive as possible. Basically before you go “shopping” you pretty much have to schedule your daughter to do it in advance from the schedule menu (which is pretty much the most important menu of the game where your decision is made there).

A cut of the schedule interface detailing your daughter weekly activities. Shopping will be done at day 3,4, and 5.

 

After that, in the automated turn, you will be presented with another interface where you can select which shop your daughter will visit and what item do you want her to buy. Pretty simple really. Aside from the simple usual shopping system, we decided to add “haggle” mechanics. Taking advantage of your daughter stats that you can train such as ‘Charm, Charisma, and Math’ she can haggle the price of any items/equipments and make it cheaper for her.

Another aspect from the shop menu we want to implement is item/equipment stocks. Each shop will have limited stocks of everything depending on their rarity and value, some items are abundant while the others might be scarce. At the moment this is still work in progress, but I think you got the general idea of this supply/demand system.

Here’s the animated gifs of shopping in action!:

Day shopping.
Midnight shopping, time will advance everytime you move to another shop.

 

Before we move to another topic, you can also check and read the details of this shopping in action on the post at our thread in tigsforum hereDo visit and say hi to us there!

Redoing and polishing the interface (yet) again

One of the biggest gripe of this game for me is to come up with the interface that is simple enough that even a 5-years old can understand instantly and intuitively without any guide or dragging tutorial. Considering the actual complexity of the game (despite of its cutesy appearance) and the need of so many interface and visual cues it’s proven to be really hard to do.

The schedule menu interface is the biggest offender of the “too complex interface” so far. Currently it looks like this:

In this menu you need to select player activity, weekly meal plan, and 7 days of your daughter activityAll lined up at the list on the right side, while the wide, window selection at the left is the available choice corresponding to what you are currently selecting and set up in the list at the right side. The colorful button at the top of the left side is the sort/filter button, to sort the selection based on its categories. Pretty confusing right? Especially considering the overload of information with so many descriptions and buttons at once on screen. This is the second iteration of the schedule menu revamp, it used to looks like this before:

Even more confusing right?

Anyhow this will be a tough homework for me. Hopefully I can come up with better design that is nice to look at and easily understandable at a glance.

Next is the slight change on the interface such as icons, buttons, and windows. At the beginning of the development, I actually fell for the Flat UI meme only to realize it looks horrible with the artstyle we are going with, and is too unsophisticated. So I decide to change it slightly and give it more character and depth with emboss and outline effects:

Old interface style. Flat everywhere.
New interface style. Outlined and emboss on interactable buttons.

 

Now at least the interface is not as bland as the top flat UI anymore. Although the interface style might change again since these are all still quite early- actually middle way in development.

Well, I think that is all from me. Hopefully this devlog could inspire you, see you on our next Ciel devlog!

If you are craving more for Ciel Fledge do visit our side tumblr. Hey we also had Instagram page too if you are into that!