Design
Conforming
19/05/12 08:02
The need to conform, like, that my web page conforms or my profile image conforms, or that my app has a splash page with the company logo (that delays the user because everyone else delays the user), or what I say or what I write, or tweet, conforms, or who I follow conform, because I want to learn how to conform, is useful but up to a point becomes restrictive in a way we could call severe.
The guys who created WWW didn’t conform, they didn’t want to restrict, keep silent and conform, and that’s why were here--same with apps.
Fashion, conforming to fashion, not having the guts to create it, not buying that last season outfit during sales at K-mart/Walmart, but deciding to conform is a decision to hide. We hide because we want to conform and we’re afraid--of what? Not conforming? Not doing what you were told to do? Not doing what you’re supposed to do? Not doing what everyone thinks what you’re supposed to do? But why?
How does the need to conform restrict your life?
"An imitation of a single action"
16/05/12 06:42
“[…] the poem is constructed out of several actions, like the Iliad and the Odyssey, which have many such parts, each with a certain magnitude of its own. Yet these poems are as perfect as possible in structure; each is, in the highest degree attainable, an imitation of a single action.” -Aristotle, in Poetics.
Experience
15/05/12 06:50
“Experience is indispensable for the making of any instrument.” -Leonardo da Vinci
Joy atoms vs. drudgery atoms
12/05/12 17:29
I have a theory that has no scientific value at all (although, it could help a creative scientist).
The digital artist’s work (text, images, sound) can be reduced to bits, ones and zeros, and furthermore into electromagnetic pulses or light. The light (aka photons) eventually interact with the atoms of anyone who consumes (and hopefully enjoys) your artwork.
So basically, it’s your atoms sending stuff to my atoms.
When overtaking your own projects or productions, reserving a little time on the side, I firmly believe that if there’s any self-induced drudgery involved, it will eventually transmit and people might walk away from your work. It’s that forced feeling that becomes the base-tone of your work and makes it somewhat bothersome to enjoy, i.e., not enjoyable at all.
On the other hand, when you’re using your joy atoms, that joy transmits in anything you’re doing, whether it’s meant for entertainment, artistic delight or deeper reflection (or a combination of these).
Therefore, the question becomes: Is it worth undertaking anything on your own if you’re not operating in your comfort zone, or sweet spot, and letting the joy atoms do the work?
The digital artist’s work (text, images, sound) can be reduced to bits, ones and zeros, and furthermore into electromagnetic pulses or light. The light (aka photons) eventually interact with the atoms of anyone who consumes (and hopefully enjoys) your artwork.
So basically, it’s your atoms sending stuff to my atoms.
When overtaking your own projects or productions, reserving a little time on the side, I firmly believe that if there’s any self-induced drudgery involved, it will eventually transmit and people might walk away from your work. It’s that forced feeling that becomes the base-tone of your work and makes it somewhat bothersome to enjoy, i.e., not enjoyable at all.
On the other hand, when you’re using your joy atoms, that joy transmits in anything you’re doing, whether it’s meant for entertainment, artistic delight or deeper reflection (or a combination of these).
Therefore, the question becomes: Is it worth undertaking anything on your own if you’re not operating in your comfort zone, or sweet spot, and letting the joy atoms do the work?
Time for a Leonardo da Vinci quote
02/05/12 07:48
Wednesday LdV quote:
Also a nice piece about how accurate Leonardo’s drawings were of anatomy. My favorite is the part where he actually failed: “Despite his desire to draw the body accurately, Leonardo was still wedded to certain ideas that he had inherited from the Middle Ages. He still, for instance, thought of the human reproductive system as in some way analogous to that of plants.”
“What is that thing which is not defined and would not exist if it were defined? It is infinity, which if it could be defined would be limited and finite, because that which can be defined ends with the limits of its circumsphere, and that which cannot be defined has no limits.” -LdV
Also a nice piece about how accurate Leonardo’s drawings were of anatomy. My favorite is the part where he actually failed: “Despite his desire to draw the body accurately, Leonardo was still wedded to certain ideas that he had inherited from the Middle Ages. He still, for instance, thought of the human reproductive system as in some way analogous to that of plants.”
On software design
26/04/12 07:12
We are trained to raise the bar, reach new heights, learn new things and boil the stone until it crumbles. To learn technology is exactly that.
However, to use technology is exactly the opposite. It’s about lowering the bar.
Does feasibility and convenience dictate our design choices, or do we want to complicate things in order to satisfy other wants and needs?
However, to use technology is exactly the opposite. It’s about lowering the bar.
Does feasibility and convenience dictate our design choices, or do we want to complicate things in order to satisfy other wants and needs?
On interaction feedback
24/04/12 06:49
One of the fundamental things of any tool, device, application, game, is interaction feedback.
A good example of this is a steering wheel. When you turn the wheel the car turns and you feel it instantly. “Good handling” is important in cars for people who like to drive.
A water surface has good touch feedback. When a child sees puddles of water outside, she wants to go and lay her hand and pat the water, just to see the feedback waves that are produced. The produced water waves are instant, complex and engaging. The connection with water is instant. They say letting children play with water like this is good for the brain.
A super ball is more interesting than a tennis ball at first because it bounces so much. A super ball gives great feedback. A V8 engine gives great sound when we press the gas pedal. Even a smooth wooden surface gives great feedback when we knock it, smell it or feel it. A gardener loves to see her flowers bloom.
Any phenomenon that has little effort to produce but yields great feedback becomes interesting.
On the other hand, we frown and get frustrated when something doesn’t work. Our natural instinct is to hit it or kick it so that “something in there” gives in and the thing starts working again. However, we feel proud if something did start working after we kicked it, because “We did it. We gave it the magic kick.”
If a button doesn’t work or if I’m not sure something did what I meant it to do, I get neck pain. Or, it just doesn’t pull me in because the effort / great feedback characteristic is not there--same thing with any interaction.
If I move my finger and nothing happens why should I continue to explore it further? I have to see the feedback because I want to understand it.
Our minds are drawn towards phenomena like these and it’s up to the producer / director / artist / engineer / marketer to come up with ways to utilize them in order to make the production something worth checking out.
A good example of this is a steering wheel. When you turn the wheel the car turns and you feel it instantly. “Good handling” is important in cars for people who like to drive.
A water surface has good touch feedback. When a child sees puddles of water outside, she wants to go and lay her hand and pat the water, just to see the feedback waves that are produced. The produced water waves are instant, complex and engaging. The connection with water is instant. They say letting children play with water like this is good for the brain.
A super ball is more interesting than a tennis ball at first because it bounces so much. A super ball gives great feedback. A V8 engine gives great sound when we press the gas pedal. Even a smooth wooden surface gives great feedback when we knock it, smell it or feel it. A gardener loves to see her flowers bloom.
Any phenomenon that has little effort to produce but yields great feedback becomes interesting.
On the other hand, we frown and get frustrated when something doesn’t work. Our natural instinct is to hit it or kick it so that “something in there” gives in and the thing starts working again. However, we feel proud if something did start working after we kicked it, because “We did it. We gave it the magic kick.”
If a button doesn’t work or if I’m not sure something did what I meant it to do, I get neck pain. Or, it just doesn’t pull me in because the effort / great feedback characteristic is not there--same thing with any interaction.
If I move my finger and nothing happens why should I continue to explore it further? I have to see the feedback because I want to understand it.
Our minds are drawn towards phenomena like these and it’s up to the producer / director / artist / engineer / marketer to come up with ways to utilize them in order to make the production something worth checking out.
On the brink of it
20/04/12 06:19
Interest spawns.
A slight excitement.
A silenced mind pondering.
A moving, tingling sensation.
Deeper breathing and a strong posture.
A slight downward movement.
Eyes wandering.
A moment of discovery, not of the intellect.
A thought arose from silent space.
A slight excitement.
A silenced mind pondering.
A moving, tingling sensation.
Deeper breathing and a strong posture.
A slight downward movement.
Eyes wandering.
A moment of discovery, not of the intellect.
A thought arose from silent space.
On interpretations
15/04/12 07:34
Interpretation, a lens or “jewel,” through which the creator distorts, bends and colors the work can be thought of as an irreversible artistic step of a production. The development of perception is unique to everyone, which is why no two artists are alike.
Interpretation is present when creating any type of media. It allows the consumer a window to another kind of perceptual state, which is why, at times, a work where multiple artists are able to collaborate, becomes multidimensionally interesting.
However, for the different dimensions or interpretations to work (in unison, harmony, consonance, dissonance, assonance, etc.), a certain collaborative consensus must exist. This can occur purely by chance or by hard work and past experience. A good audition will reveal whether a person will be someone who can add interpretational value to a production.
Less is more at times. If the producer/director allows each member to exercise their best ability by forging their skills together in an intelligent way, a joyful inspirational productive environment is created.
iOS AV Workflow Example
14/04/12 10:01
A quick piece about multimedia assets and workflows in an iOS multimedia project.
Software is simple
14/04/12 07:19
How simple is software?
It’s as simple as the platform it’s running on. Logic gates, memory, a clock and UI. However, we use abstractions to make software meet the way you think and the way you see. We reuse algorithms, structures of data and levels of complexity to create something on top.
Which is what the brain does.
Is it for your necessity, convenience? Or, is it just for a gimmick, for entertainment? Either way, we’ll sell it to you.
Plain and simple.
Is it about the brush?
13/04/12 05:00
With the brush in hand, it’s suddenly not about the brush anymore. Hence we talk about the brush.
Does the method matter when we are aiming for the same outcome?
Does the medium matter as much as the message?
Yes!
The medium matters. The method matters. The tool matters. The brush matters.
But no:
The question is: can we get over that and focus on the outcome?
Hint: the outcome is something other than the brush.
Sustaining joy in creation
11/04/12 04:08
Is it needed?
What are the incentives to sustain a joyful productive environment?
Is it knowledge that, one day, the weight will fall off your shoulders?
Hope for landing that one big contract or sale?
Or is it rather in small details?
Or in the people you get to work with?
Like the engineer that only once in seven years heard “good work” from his boss?
Or more like the fitness trainer who gets a “thank you” several times a week?
What are the incentives to sustain a joyful productive environment?
Is it knowledge that, one day, the weight will fall off your shoulders?
Hope for landing that one big contract or sale?
Or is it rather in small details?
Or in the people you get to work with?
Like the engineer that only once in seven years heard “good work” from his boss?
Or more like the fitness trainer who gets a “thank you” several times a week?
To Produce
08/04/12 22:59
To produce is to produce.
When you produce,
nothing is missing,
there is nothing to take away,
nothing to add,
nothing else but,
to produce.
When you produce,
nothing is missing,
there is nothing to take away,
nothing to add,
nothing else but,
to produce.
Learning by Doing
04/04/12 06:20
A conversation, almost an argument, took place between a lead singer and his band.
Members of the band were concerned about new songs that the singer wanted to play the very night. Show time was in a few hours, the house was full, and nobody had ever played these songs before.
“The thing is that we haven’t rehearsed.”
Known for his wild ideas, the singer replied:“Not a problem. We will rehearse during the gig."
Members of the band were concerned about new songs that the singer wanted to play the very night. Show time was in a few hours, the house was full, and nobody had ever played these songs before.
“The thing is that we haven’t rehearsed.”
Known for his wild ideas, the singer replied:“Not a problem. We will rehearse during the gig."
How art declines...
02/04/12 07:41
…according to da Vinci:
“The painter’s work will be of little merit if he takes the painting of others as his standard, but if he studies from nature he will produce good fruits; as is seen in the case of the painters of the age after the Romans, who continued to imitate one another and whose art consequently declined from age to age.”
“After these came Giotto the Florentine, who was born in the lonely mountains, inhabited only by goats and similar animals; and he, being drawn to his art by nature, began to draw on the rocks the doings of the goats of which he was the keeper; and thus he likewise began to draw all the animals which he met with in the country: so that after long study he surpassed not only all the masters of his age, but all those of many past centuries.”
“After him art relapsed once more, because all artists imitated the painted pictures, and thus from century to century it went declining, until Tomaso the Florentine, called Masaccio, proved by his perfect work that they who set up for themselves a standard other than nature, the mistress of all masters, labour in vain.”
The need to remix
31/03/12 05:36
It occurred to me, while working yesterday, that the need to work on different things is actually crucial. What seems to happen is that things, the tricks and the skills needed on what you worked on a month ago start gradually fading away (which is when most of us use copy paste).
I’ve written a lot about specialization, which allows for a high level of skill and understanding in a certain area. But to reach that you also need to expand to the borders (even crossing the borders), come back in and be able to look at your own field from different points of view (for this there is no copy paste).
This is from Jack London’s The Sea Wolf:
I’ve written a lot about specialization, which allows for a high level of skill and understanding in a certain area. But to reach that you also need to expand to the borders (even crossing the borders), come back in and be able to look at your own field from different points of view (for this there is no copy paste).
This is from Jack London’s The Sea Wolf:
“I remember thinking how comfortable it was, this division of labour which made it unnecessary for me to study fogs, winds, tides, and navigation, in order to visit my friend who lived across an arm of the sea. It was good that men should be specialists, I mused. The peculiar knowledge of the pilot and captain sufficed for many thousands of people who knew no more of the sea and navigation than I knew. On the other hand, instead of having to devote my energy to the learning of a multitude of things, I concentrated it upon a few particular things, such as, for instance, the analysis of Poe’s place in American literature […]”
Why stop?
30/03/12 06:37
Musicians don’t stop in the middle of a concert to wait for applause. They sense if things are going well or if things are rotting away, but they don’t stop.
Failure or success (or something in between), you can’t stop on stage.
Feedback has a way of finding you in any case.
Failure or success (or something in between), you can’t stop on stage.
Feedback has a way of finding you in any case.
More About Cycles
30/03/12 04:21
The mind is limited. You seem to get passionate about one thing and then pursue that. The mind fills up with everything about it.
When a venture, project or production is coming to its end something happens. A new cycle begins. What is the best way to proceed at this point? To take care and finish what you began, of course. Loose ends always take time.
What about the new things that are coming? What is the best way to start something new?
The turning point of a cycle seems to be an important time when one must keep the mind open and not rush, but with determination walk in one direction while keeping all options open in every direction.
Anyway, just keep the production line running.
When a venture, project or production is coming to its end something happens. A new cycle begins. What is the best way to proceed at this point? To take care and finish what you began, of course. Loose ends always take time.
What about the new things that are coming? What is the best way to start something new?
The turning point of a cycle seems to be an important time when one must keep the mind open and not rush, but with determination walk in one direction while keeping all options open in every direction.
Anyway, just keep the production line running.
From Vision to Concrete Tasks
28/03/12 07:40
One problem with ideas and visions is that there are too many of them.
The other, more severe problem, might be in the difficulty of transforming the vision into concrete tasks.
In a workshop, do engine mechanics work on one car at a time? I know that in a laundromat the idea is to maximize the rate of laundry that comes in and goes out.
Is design a combination of a workshop and a laundromat? Not entirely. Maybe it is time to do things in a different way.
The other, more severe problem, might be in the difficulty of transforming the vision into concrete tasks.
In a workshop, do engine mechanics work on one car at a time? I know that in a laundromat the idea is to maximize the rate of laundry that comes in and goes out.
Is design a combination of a workshop and a laundromat? Not entirely. Maybe it is time to do things in a different way.
Navigating AV Tools in Lion
24/03/12 08:59
A quickie I wrote about multimedia tools available in Lion.
Nerves and Senses
23/03/12 07:17
“I have found that in the composition of the human body as compared with the bodies of animals the senses are less subtle and coarser; it is thus composed of less ingenious machinery and of cells less capable of receiving the power of the senses.”
“I have seen that in the lion the sense of smell is connected with the substance of the brain and descends through the nostrils which form an ample receptacle for it; and it enters into a great number of cartilaginous cells which are provided with many passages in order to receive the brain.”
“A large part of the head of the lion is given up to the sockets of the eyes, and the optic nerves are in immediate contact with the brain; the contrary occurs in man, because the sockets of the eyes, and the optic nerves are subtle and long and weak, and owing to the weakness of their action we see little by day and less at night; and the animals above mentioned see better at night than in the daytime; and the proof of this is that they seek their pray at night and sleep during the daytime, as do also the nocturnal birds.”
From Thoughts on Art and Life by Leonardo da Vinci.
Creators' Way
17/03/12 08:20
Creators learn while creating.
The absurdity of a package based learning system is the assumption that learning is actually separate from the real thing. Learn first, then do.
Creators learn while creating, that’s why they create.
Sure, go to school and get training, but understand that some people are like gun powder in some areas while others are like blocks of wood in other areas.
The teacher is the spark or the flame, inner or outer.
The absurdity of a package based learning system is the assumption that learning is actually separate from the real thing. Learn first, then do.
Creators learn while creating, that’s why they create.
Sure, go to school and get training, but understand that some people are like gun powder in some areas while others are like blocks of wood in other areas.
The teacher is the spark or the flame, inner or outer.
Power of syllables
14/03/12 07:14
Recently, our seven month old has learned to recite syllables (“tha tha tha”).
The instant effect of syllables is a search for a meaning. What could “tha tha tha” mean?
A heart wreckening cry combined with “tha tha tha” certainly has a different meaning than a giggle combined with “tha tha tha”.
Grandmother has left, which is sad “tha tha tha”. I’ve eaten well and slept well and I feel like I’m in balance “tha tha tha”.
We even look for personality in the syllable. What will she sound like when she’ll be able to talk? As a father I already hear a personal tone in her voice.
The instant effect of syllables is a search for a meaning. What could “tha tha tha” mean?
A heart wreckening cry combined with “tha tha tha” certainly has a different meaning than a giggle combined with “tha tha tha”.
Grandmother has left, which is sad “tha tha tha”. I’ve eaten well and slept well and I feel like I’m in balance “tha tha tha”.
We even look for personality in the syllable. What will she sound like when she’ll be able to talk? As a father I already hear a personal tone in her voice.
Fall log entry & morning walk
13/03/12 06:46
Fall is coming gradually to Brazil. The air feels slightly cooler and fresher. A different kind of business sets in. I’m taking advantage of these days by going out in the morning.
Thoughts on Art and Life
12/03/12 07:10
I have been reading Leonardo da Vinci’s book called Thoughts on Art and Life (available for free in iBooks). What struck me most was how modern the things he writes sound:
==
Threats are the only weapons of the threatened man.
A natural action is accomplished in the briefest manner.
There is nothing which deceives us as much as our own judgement.
Avoid the precepts of those thinkers whose reasoning is not confirmed by experience.
It is better to imitate ancient than modern work.
Finally:
He who in reasoning cites authority is making use of his memory rather than of his intellect.
==
An amazing book that I’m able to get back to anywhere at any time.
==
Threats are the only weapons of the threatened man.
A natural action is accomplished in the briefest manner.
There is nothing which deceives us as much as our own judgement.
Avoid the precepts of those thinkers whose reasoning is not confirmed by experience.
It is better to imitate ancient than modern work.
Finally:
He who in reasoning cites authority is making use of his memory rather than of his intellect.
==
An amazing book that I’m able to get back to anywhere at any time.
Nothing new under the sun
29/02/12 06:43
“Nothing new under the sun” means that the same challenges, the same problems, the same thoughts have been addressed over and over again for centuries.
Of course, there is nothing new under the sun. The only thing that changes is our perception about it. But how much does it really change?
What have people in ancient cities and civilizations been thinking about? Did their daily thoughts differ that much from ours?
“Why didn’t we think of this before?” “Why did it take so long?” “Why, if the solution is so simple?” “Why do we complicate things?” “Why now?”
Of course, there is nothing new under the sun. The only thing that changes is our perception about it. But how much does it really change?
What have people in ancient cities and civilizations been thinking about? Did their daily thoughts differ that much from ours?
“Why didn’t we think of this before?” “Why did it take so long?” “Why, if the solution is so simple?” “Why do we complicate things?” “Why now?”
Tintin's eyes (not connecting the dots)
26/02/12 19:16
I have been a big fan of Tintin since childhood. I learned to read from these albums. I have read everything since again and again in at least four different languages. Today, I remember every phrase, more or less, in every album so switching to another language isn’t hard. You begin to learn new phrases and words not by memorizing but by recognition (“so that’s how it’s said in this language”-style).
There is one thing to note about these albums. It is the way Herge draws eyes. They are always as minimalistic as possible (just dots basically), however, these dots convey such a wide range of expression that you begin to wonder whether everyone sees them in the same way.
After all, it has been proved by neurologists* that the mind paints and fills in any gaps for the perception mechanism to give out a complete image. This seems to happen on different stages of the perception mechanism. Successful artists / producers (Herge among them) have probably known this already, or have been suspecting it while perfecting their craft.
As producers how much do we let readers / fans / customers fill in when consuming the work we put out? Do we give them that chance?
I’m lately thinking about Tintin’s eyes when I’m working.
* For reference, see Phantoms in the Brain: Probing the Mysteries of the Human Mind
on Amazon (affiliate link).[A kind reader directed me to a Ted talk by the author of Phantoms in the Brain, VS Ramanchandran. I’m glad there are other Ramachandran fans out there! Thanks! I’ve read this book (in English) about five years ago, if I recall correctly. There are other very interesting things in the book, not only the mind painting part. The book somehow keeps popping up from time to time -- it’s a true classic. I’d like to read it in Portuguese one day…]
P.S. If you happen to go to Amazon from here, do a search for Adventures of Tintin
if you’re not familiar with these albums yet. Enjoy!Mediocrity Checklist
21/02/12 08:27
Mediocre A:
Don’t try to get better at what you are.
Don’t try to change the world.
Don’t disturb us.
Don’t disrupt our daydream.
Don’t try to be different.
Don’t try to think different.
Don’t even think of making the world a better place.
Just don’t.
Mediocre B:
I agree with you Mediocre A, as so many do.
Mediocre A & B (in chorus):
Let us silence all voices that do not conform to our view of the world. Let us laugh and make fun of anything we do not understand. Let us get hurt when we are challenged. Let us suppress our thoughts and feelings.
We want to stay safe in our castles, which we have built around us, not only by ourselves but also with the help of others like us.
Mediocre C:
Well said, brothers. Let us criticize loudly, whenever we see anything that might challenge our worldview.
...
Don’t try to get better at what you are.
Don’t try to change the world.
Don’t disturb us.
Don’t disrupt our daydream.
Don’t try to be different.
Don’t try to think different.
Don’t even think of making the world a better place.
Just don’t.
Mediocre B:
I agree with you Mediocre A, as so many do.
Mediocre A & B (in chorus):
Let us silence all voices that do not conform to our view of the world. Let us laugh and make fun of anything we do not understand. Let us get hurt when we are challenged. Let us suppress our thoughts and feelings.
We want to stay safe in our castles, which we have built around us, not only by ourselves but also with the help of others like us.
Mediocre C:
Well said, brothers. Let us criticize loudly, whenever we see anything that might challenge our worldview.
...
Procedural vs. relational
15/02/12 09:33
Books are traditionally procedural, that is, they have a beginning and the middle which eventually takes you to the end. Folklore isn’t procedural (until it is collected into a book). In a book folklore, which is usually rather abstract and relational (like a web) becomes a narrative of lesser dimensions that takes the reader through the order of pages or history. The same thing applies with a play or a movie, or anything that has a plot.
A series of books or narratives becomes a canon where one can digest the whole body of knowledge and basically create a web of it in the mind. Good storytellers are able to digest a large body of literature and present it in a relational fashion.
Relational information becomes more interesting. This is my own theory, but, maybe it is due to the way the mind handles data.
Going digital: the book, ebook or blog could present information in a more relational fashion (kind of like a mind map), instead of having ordered chapters and sections.
Still, maybe we are so good at relational that it’s actually the procedural (a projection from relational of lesser dimensions, well baked and digested) that creates the thought provoking material.
A series of books or narratives becomes a canon where one can digest the whole body of knowledge and basically create a web of it in the mind. Good storytellers are able to digest a large body of literature and present it in a relational fashion.
Relational information becomes more interesting. This is my own theory, but, maybe it is due to the way the mind handles data.
Going digital: the book, ebook or blog could present information in a more relational fashion (kind of like a mind map), instead of having ordered chapters and sections.
Still, maybe we are so good at relational that it’s actually the procedural (a projection from relational of lesser dimensions, well baked and digested) that creates the thought provoking material.
Mind control
13/02/12 07:51
Can you control the mind?
Up to a point, you can probably control someone else’s mind, but what about your own?
“I will get up in the morning.” “I will go and take care of those permits and papers.” “I will learn that method.”
Drudgery. Have you created a framework in which you’ve enslaved yourself? Or, is the current situation a compromise, something you are waiting to pass? Are you waiting for light to appear at the other end of the tunnel?
Could there be another way?
Up to a point, you can probably control someone else’s mind, but what about your own?
“I will get up in the morning.” “I will go and take care of those permits and papers.” “I will learn that method.”
Drudgery. Have you created a framework in which you’ve enslaved yourself? Or, is the current situation a compromise, something you are waiting to pass? Are you waiting for light to appear at the other end of the tunnel?
Could there be another way?
Think Different?
10/02/12 10:45
I had a very nice time during my second three day pause of the year. I feel most batteries got recharged. When the mind is focused around something for a long time and then suddenly set free, it starts to wander in strange ways and starts to see things in a different way.
Think Different is a good slogan once grasped in a productive way. Still, the problem with Think Different is that one might confuse it with differentiation, i.e., Be Different, or differentiate. Do something different. Why is this a pitfall?
When you look at digital online stores, like the App Store, Android Marketplace and others, you instantly see how full of broken apps they are. You see the struggle and the race to get something up there quickly for of those millions of consumers with credit cards in the hope that they will click buy for your app. Thousands of developers have thought: “I’m going to do something different,” but they haven’t gone all the way. I’m guilty of this too.
When I really look at the App Store, I don’t see a large “wonderful apps” versus “broken/mediocre apps” ratio. If you search for any category of apps or games the thing you’ll find are dozens of poor mediocre broken down apps and perhaps one or two apps that, well, deliver quite nicely. However, they could do so much better, not to mention about the way apps are ridden (inelegantly) with ads.
A few years ago, I bought Think Different (not a book, but mentally as a slogan) and I have positive thoughts for the people who propagate this message. However, I assumed Think Different also meant Be Different. In software development terms this means: to do something different. However, right now, I’m convinced that this is not the way to go.
Why not make something much better?
Think Different is a good slogan once grasped in a productive way. Still, the problem with Think Different is that one might confuse it with differentiation, i.e., Be Different, or differentiate. Do something different. Why is this a pitfall?
When you look at digital online stores, like the App Store, Android Marketplace and others, you instantly see how full of broken apps they are. You see the struggle and the race to get something up there quickly for of those millions of consumers with credit cards in the hope that they will click buy for your app. Thousands of developers have thought: “I’m going to do something different,” but they haven’t gone all the way. I’m guilty of this too.
When I really look at the App Store, I don’t see a large “wonderful apps” versus “broken/mediocre apps” ratio. If you search for any category of apps or games the thing you’ll find are dozens of poor mediocre broken down apps and perhaps one or two apps that, well, deliver quite nicely. However, they could do so much better, not to mention about the way apps are ridden (inelegantly) with ads.
A few years ago, I bought Think Different (not a book, but mentally as a slogan) and I have positive thoughts for the people who propagate this message. However, I assumed Think Different also meant Be Different. In software development terms this means: to do something different. However, right now, I’m convinced that this is not the way to go.
Why not make something much better?
How to check the iPad's GPU
04/02/12 11:28
I need to have my program to know whether I’m on an iPad 1 or iPad 2. Here’s the simplest way I’ve found:
If you’re on an iPad 1 glGetString(GL_RENDERER) will yield “PowerVR SGX 535” and if you’re on an iPad 2 glGetString(GL_RENDERER) will yield “PowerVR SGX 543”.
If it’s something else then you’re probably on an iPad 3 or later.
According to glGetString: “GL_RENDERER
Returns the name of the renderer. This name is typically specific to a particular configuration of a hardware platform. It does not change from release to release.”
If you’re on an iPad 1 glGetString(GL_RENDERER) will yield “PowerVR SGX 535” and if you’re on an iPad 2 glGetString(GL_RENDERER) will yield “PowerVR SGX 543”.
If it’s something else then you’re probably on an iPad 3 or later.
According to glGetString: “GL_RENDERER
Returns the name of the renderer. This name is typically specific to a particular configuration of a hardware platform. It does not change from release to release.”
Starting From the Large Scale, Going Down.
03/02/12 10:57
I’m currently in the process of optimizing Isopod for iPad 1. A good design philosophy is to start with the fastest device, going down to devices with less capabilities. This is because, of course, you want the advantages of the latest technology, and you want your design to start from that foothold – not the other way around.
Therefore, what I’m currently doing is developing on the iPad 2 and Lion first, and then down-sampling, stripping down and downgrading for the lower end iOS devices.
Isopod is the first game I’m creating with this strategy. All the earlier games have been done by starting with the lowest denominator and upgrading from there*. I have a feeling that starting at the highest dominator, downgrading from there, is going be different. Let’s see.
*People make silly mistakes sometimes.
Refactoring
28/01/12 10:05
I’m currently in the process of refactoring and rearranging a multimedia game application. The project consists of about 8000 lines of code and 20 MB of graphics and audio files. While the modifications are routine (I just want to upgrade to the latest APIs, optimize and clean up), there’s a lot of potato peeling involved, moving and modifying, even erasing, large chunks of code so that they fit in with the rest of the program and the new technologies.
Because no one right solution exists, you run into situation where you have to make a design decision. Here’s a couple of strategies that went through my mind:
1) Don’t be afraid to transcend. Modifying your creation involves taking a solid part of it, which has been working OK until now, and breaking it apart so that nothing actually works anymore. During the time you’re fixing it, you’re in a state of change (moving through four dimensional space). Let it flow.
2) Trust the parts that work already. Change the parts you have to change. Don’t touch anything else.
3) Think like a car mechanic. Think like a surgeon. Think like an architect. Think like a construction worker. Think like a tailor. Think like a truck driver.
4) Think on paper (buy a ruler). When facing a choice of multiple design decisions make a list of them, their good points and bad points. You’ll understand them much better and probably why one choice is actually the best one (for now).
5) This is for multimedia application programmers: Think like a cook.
Because no one right solution exists, you run into situation where you have to make a design decision. Here’s a couple of strategies that went through my mind:
1) Don’t be afraid to transcend. Modifying your creation involves taking a solid part of it, which has been working OK until now, and breaking it apart so that nothing actually works anymore. During the time you’re fixing it, you’re in a state of change (moving through four dimensional space). Let it flow.
2) Trust the parts that work already. Change the parts you have to change. Don’t touch anything else.
3) Think like a car mechanic. Think like a surgeon. Think like an architect. Think like a construction worker. Think like a tailor. Think like a truck driver.
4) Think on paper (buy a ruler). When facing a choice of multiple design decisions make a list of them, their good points and bad points. You’ll understand them much better and probably why one choice is actually the best one (for now).
5) This is for multimedia application programmers: Think like a cook.
Tiled Background Color View
27/01/12 07:35
I’ll try to explain what I’ve been banging my head against for the last four days and then how I resolved it. It is kind of simple but annoying at the same time.
I’m not sure if it has been due to system upgrades or programs that I’ve installed, but somehow the color chooser is messed up.
For example, in Xcode if I have a flat label (a png) with a certain background color and I want to blend it in with the UIView’s background color, what I would normally do is switch to Interface Builder create an UIImageView and put the png there. Then, using the color chooser I’d choose the png’s color at the border and make that color the background color of my UIView. However, now what I get is this:
What’s happening probably is that the color chooser gets messed up in its color profiles, that you can select by clicking the colored square under the color sliders tab. However, after trying to figure this out for three days it feels like insanity.
I tried playing with this in the hope to get my background color to confirm with my labels, however, in the end it felt like a game of cat and mouse. Even selecting the colors in GIMP and inputting the RGB values by hand gave out different results.
Fortunately, you can set the color property of an UIView programmatically. This is done by calling setColor:color giving it an UIColor instance. Even more fortunately you can instantiate UIColor with a background color tile. This is achieved by calling colorWithPatternImage:image.
Even more fortunately you can extend UIView and make it set its own background color when it awakes from its Nib (or Storyboard). What I did was the following:
1) Extend UIView by creating a class called TileBackgroundColorView (for example).
2) Include an NSString ivar in its interface definition and make it a gettable and settable property:
3) Override awakeFromNib, create an UIImage from imageName and set it the background color
4) Use GIMP or your favorite image editor to create a tile and drag it to your project. Here’s my tile:
4) Now in Interface Builder. You drag an UIView to your window (or other view making it a subview). Then selecting that third tab you set its class to TileBackgroundColorView (or whatever you’ve named your class). Then, right below (and I thought this was the fun part) there’s a box titled “User Defined Runtime Attributes”. Add an entry there by pressing the plus sign. Put Key Path as imageName, Type as String and Value as the name of your tile image. Mine happened to be “environment1_backgroundtile.png” (see figure below)
Build and run, and voila! Your background color matches whatever you see in your imaging application. Now my designer can send me whatever background colors and labels blended into them, even patterns and I don’t have to worry about it. Also, I get tiled backgrounds and patterns which means it’s going to be fast.
You can end up doing stuff like this with flat graphics and it all blends in (and use Core Animation for each individual element on the UI, for example).
I’m not sure if it has been due to system upgrades or programs that I’ve installed, but somehow the color chooser is messed up.
For example, in Xcode if I have a flat label (a png) with a certain background color and I want to blend it in with the UIView’s background color, what I would normally do is switch to Interface Builder create an UIImageView and put the png there. Then, using the color chooser I’d choose the png’s color at the border and make that color the background color of my UIView. However, now what I get is this:
What’s happening probably is that the color chooser gets messed up in its color profiles, that you can select by clicking the colored square under the color sliders tab. However, after trying to figure this out for three days it feels like insanity.
I tried playing with this in the hope to get my background color to confirm with my labels, however, in the end it felt like a game of cat and mouse. Even selecting the colors in GIMP and inputting the RGB values by hand gave out different results.
Fortunately, you can set the color property of an UIView programmatically. This is done by calling setColor:color giving it an UIColor instance. Even more fortunately you can instantiate UIColor with a background color tile. This is achieved by calling colorWithPatternImage:image.
Even more fortunately you can extend UIView and make it set its own background color when it awakes from its Nib (or Storyboard). What I did was the following:
1) Extend UIView by creating a class called TileBackgroundColorView (for example).
2) Include an NSString ivar in its interface definition and make it a gettable and settable property:
3) Override awakeFromNib, create an UIImage from imageName and set it the background color
4) Use GIMP or your favorite image editor to create a tile and drag it to your project. Here’s my tile:
4) Now in Interface Builder. You drag an UIView to your window (or other view making it a subview). Then selecting that third tab you set its class to TileBackgroundColorView (or whatever you’ve named your class). Then, right below (and I thought this was the fun part) there’s a box titled “User Defined Runtime Attributes”. Add an entry there by pressing the plus sign. Put Key Path as imageName, Type as String and Value as the name of your tile image. Mine happened to be “environment1_backgroundtile.png” (see figure below)
Build and run, and voila! Your background color matches whatever you see in your imaging application. Now my designer can send me whatever background colors and labels blended into them, even patterns and I don’t have to worry about it. Also, I get tiled backgrounds and patterns which means it’s going to be fast.
You can end up doing stuff like this with flat graphics and it all blends in (and use Core Animation for each individual element on the UI, for example).
Maunam - Vow of silence
19/01/12 06:28
The following is just musings for game design and shouldn’t be taken seriously.
The vow of silence, or maunam as known in yoga philosophy is thought of as a way to conserve energy. Often, if you have a sage in a game, he would say cryptic things, like:”avoid chili, onion and garlic”, and then fall silent.
Silence is thought of as a way to conserve energy, especially, life energy. Like the singer that avoids performances and never sings, even though everyone wants her to, the spiritual woman practices restraint and only talks, writes, or sings at a moment given. When she does sing, it’s a magical moment.
Restraint in eastern philosophy also relates to breathing. You are supposed to have been given a certain amount of breaths on this earth. I have never heard anything about writing, though. Could writing, as we know it today, by sending daily electrons to each other, have a spiritual relationship in regard to the vow of silence? How many words are we given for the journey of our lifetime? How many electrons?
I bet writers are given more words on average.
One more thing to mention is that in a movie or game, a humorous moment is when sages start talking about pastries, a soap opera, why not even a consumer product they’re fond of, a car most probably like the “latest Nissan”, i.e., they have horrible taste! But finally, they fall silent of course.
The vow of silence, or maunam as known in yoga philosophy is thought of as a way to conserve energy. Often, if you have a sage in a game, he would say cryptic things, like:”avoid chili, onion and garlic”, and then fall silent.
Silence is thought of as a way to conserve energy, especially, life energy. Like the singer that avoids performances and never sings, even though everyone wants her to, the spiritual woman practices restraint and only talks, writes, or sings at a moment given. When she does sing, it’s a magical moment.
Restraint in eastern philosophy also relates to breathing. You are supposed to have been given a certain amount of breaths on this earth. I have never heard anything about writing, though. Could writing, as we know it today, by sending daily electrons to each other, have a spiritual relationship in regard to the vow of silence? How many words are we given for the journey of our lifetime? How many electrons?
I bet writers are given more words on average.
One more thing to mention is that in a movie or game, a humorous moment is when sages start talking about pastries, a soap opera, why not even a consumer product they’re fond of, a car most probably like the “latest Nissan”, i.e., they have horrible taste! But finally, they fall silent of course.
"The measure of success is not whether something is appreciated by the maximum amount of people."
05/01/12 21:54
Jonas Kyratzes:
“I’ve sat here for a long time, trying to find a way of articulating how I feel. It's not easy, and I don't want to make it sound like I'm condemning everyone who works in a different way. But personally, when it comes to the things that I make, I want each and every one of them to be itself. The measure of success is not whether something is appreciated by the maximum amount of people, but how well it succeeds at being that which it sets out to be. That's what I find interesting, that's what I enjoy and seek out - in people as well as in art. And I think that it's easy to lose that if you don't work hard to be true to each game individually.”
PnDR14 Development Environment
05/01/12 09:31
Here’s the high level architecture of the development environment for Pablo and the Devil’s Ray. Both the game and the level editor will share components for loading and saving data from the database. This is mostly based on JSON and HTML5’s XMLHTTPRequest.
On the server side we start out small with a simple PHP/MySQL server that handles requests and responses.
PnDR13 Client Server considerations 2
30/12/11 08:10
File this under “communication systems musings so that I can get my head clear”.
For the last few weeks, I have been reading a book called Pro HTML5 Programming. While the book doesn’t go very deeply into the HTML5 canvas, which I’m interested in, it provides a good overview of all the new features of HTML5.
There are a couple of interesting chapters there related to saving and loading data. The chapter about HTML5 WebSocket API explains a method that I was considering as the right way to load and save the level data in Pablo and the Devil’s Ray. However, HTML5 WebSockets are mostly for realtime communication, like “monitor someone’s current heart rate” kind of thing. Not the kind of request-response communication that we’re looking for. We just want to save or load and be done with it.
Luckily, there’s a chapter in the book about communication APIs that explains the new XMLHTTPRequest Level 2 mechanism, which looks like the right way for loading new levels. It is said to have powerful features under the hood like cross-origin requests and progress events (I can already picture a blinking text that says: “Insert disk 2. Loading...”). So this is what I’ll be looking at and how to connect it with the game server.
(Apparently, current and older versions Internet Explorer and Opera do not support the HTML5 XMLHTTPRequest. However, I don’t really see this as a problem. The three top browsers used to read this blog are Safari, Firefox and Chrome (see figure below) and I’m happy to support the top three.)
For the last few weeks, I have been reading a book called Pro HTML5 Programming. While the book doesn’t go very deeply into the HTML5 canvas, which I’m interested in, it provides a good overview of all the new features of HTML5.
There are a couple of interesting chapters there related to saving and loading data. The chapter about HTML5 WebSocket API explains a method that I was considering as the right way to load and save the level data in Pablo and the Devil’s Ray. However, HTML5 WebSockets are mostly for realtime communication, like “monitor someone’s current heart rate” kind of thing. Not the kind of request-response communication that we’re looking for. We just want to save or load and be done with it.
Luckily, there’s a chapter in the book about communication APIs that explains the new XMLHTTPRequest Level 2 mechanism, which looks like the right way for loading new levels. It is said to have powerful features under the hood like cross-origin requests and progress events (I can already picture a blinking text that says: “Insert disk 2. Loading...”). So this is what I’ll be looking at and how to connect it with the game server.
(Apparently, current and older versions Internet Explorer and Opera do not support the HTML5 XMLHTTPRequest. However, I don’t really see this as a problem. The three top browsers used to read this blog are Safari, Firefox and Chrome (see figure below) and I’m happy to support the top three.)
PnDR12 Client Server considerations
29/12/11 09:40
Yesterday, I was able to save the pixel grid (i.e., level data) in the form of a JSON object and output it into a text area from where you can copy, paste and load back data. All this is for being able to save your work when designing the characters and the levels of the game. However, there is also a long term goal, which is to make the game server driven, that is, after you complete one or two levels and advance in the world the game will load the new world from the database.
I think this is going to be handy because the framework will support both the creation of the game and the gameplay itself (two flies with one blow).
There are different options regarding the method that you can use to load and save data. However, before considering anything technical I want to think about the users of the system. For example, when designing levels, reloading the page is ok. This is because we are friends with the designer and we can create an awkward tool for our friends. They won’t complain (much).
However, when playing the game I think page reload won’t be an option. We want the web application to load and save data under the hood so that the user will have minimal interruptions. This also enables the game to be played in fullscreen.
Therefore, when sending and receiving data we have to use an “asynchronous” technology. While it is a requirement for the game we might as well do it also for the level editor app and focus on it from the start.
I’m glad this has been thought out now.
I think this is going to be handy because the framework will support both the creation of the game and the gameplay itself (two flies with one blow).
There are different options regarding the method that you can use to load and save data. However, before considering anything technical I want to think about the users of the system. For example, when designing levels, reloading the page is ok. This is because we are friends with the designer and we can create an awkward tool for our friends. They won’t complain (much).
However, when playing the game I think page reload won’t be an option. We want the web application to load and save data under the hood so that the user will have minimal interruptions. This also enables the game to be played in fullscreen.
Therefore, when sending and receiving data we have to use an “asynchronous” technology. While it is a requirement for the game we might as well do it also for the level editor app and focus on it from the start.
I’m glad this has been thought out now.
PnDR11 Save Data 6 JSON 4
28/12/11 10:16
Last time in the development of Pablo and the Devil’s Ray HTML5 game we were able to draw and save pixel data in the form of a JSON stringified object.
This morning, I was able to use Douglas Crockford’s JSON2 parse command for loading and parsing a stringified JSON string.
Earlier, we talked about the designer who is going to do all the designing and coloring of the levels and the characters. There were basically two options: save to clipboard or save to a database. This is the save to clipboard option.
Here’s the HTML5 implementation.
I put two presets there that I drew myself, a JSON cat and a JSON gerbil.
This morning, I was able to use Douglas Crockford’s JSON2 parse command for loading and parsing a stringified JSON string.
Earlier, we talked about the designer who is going to do all the designing and coloring of the levels and the characters. There were basically two options: save to clipboard or save to a database. This is the save to clipboard option.
Here’s the HTML5 implementation.
I put two presets there that I drew myself, a JSON cat and a JSON gerbil.
Sensitivity in productivity
26/12/11 11:58
Yesterday, I wrote about the tool as an amplifier. I also wrote about hunters that hunt pray on foot, basically by out-jogging the animals over the course of a few days. I saw this in a documentary and while I don’t remember the factual data (which african tribe it was, etc.) I remember a couple of interesting things that relate to sensitivity in design and productivity.
First, the hunters painted their faces. To find the pray the hunters painted their faces according to the animal they were after. Each pray (antelope, zebra, etc.) meant a certain face paint. This way, the hunters said that they were able to sense the animal better, its whereabouts and movements. Once the pray was spotted the chase began.
The hunters were bear-footed. The running went on during the day well into the evening until it was too dark to continue. The strategy behind this, I understood, was that during they day the animals normally rest and feed. But as they were being chased, they would have to flee during the day and rest during the night (which is usually when they are awake). Also, there were about five hunters. The group was small.
Not a lot of days of chasing; after about three days of chasing, the pray became so tired that it gave up and tried to hide. As one of the hunters spotted the animal in a bush, he got into close range and shot a spear. After the animal collapsed the hunter expressed compassion and respect to the pray, pet the animal, spoke to it and did away with it quickly. (This connects with how nomad hunters killed a Bear and went through a ritual of several days in an apology to the Bear’s spirit.)
I think there is something to learn here about sensitivity. We have all these powerful tools. We could set things up today to kill pray on the press of a button (we have actually done that, but that’s another story), but then we kill all of the sensitivity that’s actually part of us, because we are a part of nature. In the process we end up killing a part of ourselves. I think here exists a challenge to bring back and rediscover things regarding sensitivity in both design and in productivity.
Use the tool and amplify but don’t kill the story.
First, the hunters painted their faces. To find the pray the hunters painted their faces according to the animal they were after. Each pray (antelope, zebra, etc.) meant a certain face paint. This way, the hunters said that they were able to sense the animal better, its whereabouts and movements. Once the pray was spotted the chase began.
The hunters were bear-footed. The running went on during the day well into the evening until it was too dark to continue. The strategy behind this, I understood, was that during they day the animals normally rest and feed. But as they were being chased, they would have to flee during the day and rest during the night (which is usually when they are awake). Also, there were about five hunters. The group was small.
Not a lot of days of chasing; after about three days of chasing, the pray became so tired that it gave up and tried to hide. As one of the hunters spotted the animal in a bush, he got into close range and shot a spear. After the animal collapsed the hunter expressed compassion and respect to the pray, pet the animal, spoke to it and did away with it quickly. (This connects with how nomad hunters killed a Bear and went through a ritual of several days in an apology to the Bear’s spirit.)
I think there is something to learn here about sensitivity. We have all these powerful tools. We could set things up today to kill pray on the press of a button (we have actually done that, but that’s another story), but then we kill all of the sensitivity that’s actually part of us, because we are a part of nature. In the process we end up killing a part of ourselves. I think here exists a challenge to bring back and rediscover things regarding sensitivity in both design and in productivity.
Use the tool and amplify but don’t kill the story.
PnDR10 Save Data 5 JSON 3
23/12/11 10:10
In this morning’s implementation I managed to minify Douglas Crockford’s JSON2.js parsing routines using his JSMin program.
Here’s the implementation.
When you press the save button a function called JSON.stringify() gets called and eventually makes all the pixels in the grid get displayed in a parsed format. This is not yet the serialization part (more about that later) which I will need to send the pixels over to the server and eventually be able to save them in the database.
Feel free to browse around the source code folders.
Here’s the implementation.
When you press the save button a function called JSON.stringify() gets called and eventually makes all the pixels in the grid get displayed in a parsed format. This is not yet the serialization part (more about that later) which I will need to send the pixels over to the server and eventually be able to save them in the database.
Feel free to browse around the source code folders.
PnDR9 Save Data 4 JSON 2
21/12/11 08:47
This is my first morning ever studying JSON! (1 hour).
We have a pixel grid in an HTML5 canvas implementation that we can edit by toggling pixels on and off, and changing their color. We want to be able to save our work by sending the pixels over the wire to a database. For the serialization part of sending them over the wire I’m using JSON.
First, you have to create a JSON array that represents the object. Here’s how I’m doing it for the BooleanPixel class (see code below).
(I also have the code in today’s implementation, however, it’s just sitting there and not connected to the Javascript program in any way.)
Pretty cool JSON introduction. Here’s another one (I’m sold already).
We have a pixel grid in an HTML5 canvas implementation that we can edit by toggling pixels on and off, and changing their color. We want to be able to save our work by sending the pixels over the wire to a database. For the serialization part of sending them over the wire I’m using JSON.
First, you have to create a JSON array that represents the object. Here’s how I’m doing it for the BooleanPixel class (see code below).
(I also have the code in today’s implementation, however, it’s just sitting there and not connected to the Javascript program in any way.)
Pretty cool JSON introduction. Here’s another one (I’m sold already).
PnDR8 Save Data 3 JSON
20/12/11 09:52
To serialize our pixel grids and eventually send them over the wire to the database, I’m going to go with JSON.
I recall I have used a technology based on Java Server Pages in the past which I believe had the option of using either XML or JSON for the serialization. However, everything was quite high level and the Javascript code and the database backend was generated pretty much automatically. Back then, JSON wasn’t part of Javascript but today it is. There even seems to be pretty robust looking PHP support (which I will get back to later).
I recall I have used a technology based on Java Server Pages in the past which I believe had the option of using either XML or JSON for the serialization. However, everything was quite high level and the Javascript code and the database backend was generated pretty much automatically. Back then, JSON wasn’t part of Javascript but today it is. There even seems to be pretty robust looking PHP support (which I will get back to later).
PnDR 7 Save Data 2
19/12/11 07:38
This part will be boring if you’re not a programmer or not interested in data structures or database programming.
First of all we have our pixel (you might as well call it a quad) data structure. In our scene or level of our game (Pablo and the Devil’s Ray) they are connected in a matrix by their upper and left neighbors (see figure below).
For example, in Iteration 14 we had sixteen 10 by 10 matrixes connected together to form a scene where there’s a sort of a boardwalk and an underground cave. Then in User Interaction 10 we had a way to drag the scene around, switch pixels on and off and edit their color.
Now we are considering a way to save all this into a database.
The diagram below depicts the necessary steps when we are saving the data and loading the data.
When saving we ask for a filename (our designer bloke will write that down). Then for every pixel in the matrix we do some sort of a serialization operation (make it full of ones and zeros), send that to our database and store it there under the filename – end of story.
When loading we ask for the filename, we fetch the data, parse the bits back into boolean pixel structures, fill the pixel grid and we’re done.
First of all we have our pixel (you might as well call it a quad) data structure. In our scene or level of our game (Pablo and the Devil’s Ray) they are connected in a matrix by their upper and left neighbors (see figure below).
For example, in Iteration 14 we had sixteen 10 by 10 matrixes connected together to form a scene where there’s a sort of a boardwalk and an underground cave. Then in User Interaction 10 we had a way to drag the scene around, switch pixels on and off and edit their color.
Now we are considering a way to save all this into a database.
The diagram below depicts the necessary steps when we are saving the data and loading the data.
When saving we ask for a filename (our designer bloke will write that down). Then for every pixel in the matrix we do some sort of a serialization operation (make it full of ones and zeros), send that to our database and store it there under the filename – end of story.
When loading we ask for the filename, we fetch the data, parse the bits back into boolean pixel structures, fill the pixel grid and we’re done.
What does it replace? vs. What can I do with it?
18/12/11 09:38
The question that often arises when something new appears is “what does it replace”? Even though we are talking about technology it sounds like a boxing match – or the classic comparison of fighting styles: will a Karateka beat a Kung-fu master?
I’m much more interested in knowing what I can do with something when that something new is emerging. Is there something there for me, my friends and my prospective clients? When we talk about usability or human interaction with technology a small thing can make a big difference. Just how the thing feels makes a difference, like a refresh rate, overall responsiveness, the layout, performance under the hood or over the wire, accuracy of the timers, how it pushes out color and text, sounds, etc; all that constitutes to the overall “aura” of the technology. However, we won’t know much about it if we don’t sit down in front of it and use it (create something with it).
While I consider myself an iPad programmer today, I’m testing other things like JavaScript and HTML5, both of which I have now programmed for about 30 days and blogged about it. I must confess I never got the Ajax stuff and didn’t actually understand why people were talking about it so much. For a long time, to me, it meant those (slightly annoying) animated toolbars. However, this morning I did some research and after the last 30 days of playing around with Javascript and HTML5 canvas, things connected and I now understand fully the benefits of these asynchronous technologies.
However, it’s a long way still before I will have the confidence to take on a client project in this area if ever. Meanwhile, I’m doing stuff just for myself and friends, having fun with it for about half an hour every morning, after which I put on my iPad cap, (underwear) and overalls for the rest of the day and concentrate fully on my client project.
I’m much more interested in knowing what I can do with something when that something new is emerging. Is there something there for me, my friends and my prospective clients? When we talk about usability or human interaction with technology a small thing can make a big difference. Just how the thing feels makes a difference, like a refresh rate, overall responsiveness, the layout, performance under the hood or over the wire, accuracy of the timers, how it pushes out color and text, sounds, etc; all that constitutes to the overall “aura” of the technology. However, we won’t know much about it if we don’t sit down in front of it and use it (create something with it).
While I consider myself an iPad programmer today, I’m testing other things like JavaScript and HTML5, both of which I have now programmed for about 30 days and blogged about it. I must confess I never got the Ajax stuff and didn’t actually understand why people were talking about it so much. For a long time, to me, it meant those (slightly annoying) animated toolbars. However, this morning I did some research and after the last 30 days of playing around with Javascript and HTML5 canvas, things connected and I now understand fully the benefits of these asynchronous technologies.
However, it’s a long way still before I will have the confidence to take on a client project in this area if ever. Meanwhile, I’m doing stuff just for myself and friends, having fun with it for about half an hour every morning, after which I put on my iPad cap, (underwear) and overalls for the rest of the day and concentrate fully on my client project.
PnDR 6 (User Interaction 11) Save Data Considerations
18/12/11 04:30
With the limited tool from yesterday I already managed to create pretty awesome looking scenery!
I started considering ways to save data.
If I work with someone who understands color better than I do, I need the bloke to be able to work freely, with flexible hours, take the night out, sleep, eat and come back to color the scenery.
I’m thinking of two ways to realize this:
1) Have a save button that outputs XML for example. Our designer bloke will have to paste that somewhere in Textpad, save it and then paste it back into the editor. This sounds doable, but kind of bothersome.
2) Have a save button that saves with a filename into a database. When the bloke comes back he just needs to remember the filename to load the graphics back into the editor and continue from there.
I like option 2 because it sounds not only more usable and intuitive but also because that will be the first step into making this game database driven. This is cool because once you advance to another level it can say: “loading” or even “Insert disk 2” and load the new data from the SQL database. Therefore, I vote 1-0 in favor of option 2. It’s easier to work on and it provides a foundation for a scalable architecture.
I’m glad this decision has now been made!
I started considering ways to save data.
If I work with someone who understands color better than I do, I need the bloke to be able to work freely, with flexible hours, take the night out, sleep, eat and come back to color the scenery.
I’m thinking of two ways to realize this:
1) Have a save button that outputs XML for example. Our designer bloke will have to paste that somewhere in Textpad, save it and then paste it back into the editor. This sounds doable, but kind of bothersome.
2) Have a save button that saves with a filename into a database. When the bloke comes back he just needs to remember the filename to load the graphics back into the editor and continue from there.
I like option 2 because it sounds not only more usable and intuitive but also because that will be the first step into making this game database driven. This is cool because once you advance to another level it can say: “loading” or even “Insert disk 2” and load the new data from the SQL database. Therefore, I vote 1-0 in favor of option 2. It’s easier to work on and it provides a foundation for a scalable architecture.
I’m glad this decision has now been made!
PnDR 5 (User Interaction 10)
17/12/11 08:21
Last time we were able to move around the pixel scene and toggle pixels on and off. However, there was no way to adjust color.
For today’s version I added another element under the scene canvas that functions as a color selector (see figure below). The color sliders adjust the Red, Green, or Blue value of the current color. When a pixel is toggled it gets the current color.
(Note: Our Use Cases stated that there has to be an intuitive way to select colors. This is not very intuitive yet, but we’re getting there.)
Anyway, here’s today’s HTML5 canvas implementation.
For today’s version I added another element under the scene canvas that functions as a color selector (see figure below). The color sliders adjust the Red, Green, or Blue value of the current color. When a pixel is toggled it gets the current color.
(Note: Our Use Cases stated that there has to be an intuitive way to select colors. This is not very intuitive yet, but we’re getting there.)
Anyway, here’s today’s HTML5 canvas implementation.
PnDR 4 (User interaction 9) Planning
14/12/11 10:09
Before continuing we have to make a couple of decisions.
Our requirements (or Use Cases) state that we have a level consisting of 40*40 pixels (you could also call them color tiles). We need to move around the level and toggle tiles on an off easily (this is OK.) Then, we need a way to select a color for each tile like here. Finally, we need a way to save our work and come back later.
[Last but not least, there has to be a way to enter the data into the game code/engine (however, if you’re a designer you shouldn’t have to worry about this).]
Also, the elements of the editor should be grouped logically (and not cluttered) so that the tools are intuitive to use.
Here’s a wireframe design:
Our requirements (or Use Cases) state that we have a level consisting of 40*40 pixels (you could also call them color tiles). We need to move around the level and toggle tiles on an off easily (this is OK.) Then, we need a way to select a color for each tile like here. Finally, we need a way to save our work and come back later.
[Last but not least, there has to be a way to enter the data into the game code/engine (however, if you’re a designer you shouldn’t have to worry about this).]
Also, the elements of the editor should be grouped logically (and not cluttered) so that the tools are intuitive to use.
Here’s a wireframe design:
PnDR 3 (User interaction 8)
13/12/11 09:00
Last time we tried to add a drag operation to a controller with which you could be able to move around in the level editor (we are creating a level editor to edit this scene of an HTML5 game). The controller turned out to be not only bothersome to operate, but useless as well, because you might as well drag the entire scene.
Here’s a version where you can drag and edit the pixel scene on the HTML5 canvas (see figure below).
I took the controller out and I also made the canvas twice as wide.
Here’s a version where you can drag and edit the pixel scene on the HTML5 canvas (see figure below).
I took the controller out and I also made the canvas twice as wide.
Pablo 2 (User interaction 7, Boolean Pixels 21)
12/12/11 09:15
Last time, I got annoyed because moving around wasn’t that easy. Clicking or tapping on the controller feels bothersome. I’m trying to remedy that by adding a drag operation.
Here’s the current HTML5 canvas implementation.
Here’s the current HTML5 canvas implementation.
Pablo (User interaction 6, Boolean Pixels 20)
11/12/11 08:57
This morning I have a baby on my lap, so I have only one hand available to program.
Nevertheless, here’s a tidied up version of the level editor.
The title of the game manifested itself.
Nevertheless, here’s a tidied up version of the level editor.
The title of the game manifested itself.
Moving around the scene (User interaction 5, Boolean pixels 19)
10/12/11 10:27
I added a simple controller for moving around the play-field editor (cf. figure below).
Here’s the current version.
Here’s two new characters:
Here’s the current version.
Here’s two new characters:
User interaction 4 (Boolean pixels 18)
09/12/11 09:19
Yesterday we were able to create 10 by 10 pixel creatures and save them in the form of an array that we can paste into our game code.
This morning, I was able to connect some (but not all) of that functionality to the scene.
Here’s the current version.
By clicking/tapping on the blue square you advance on the scene and by clicking on the pixels you turn them on or off. Otherwise, there is no new functionality to consider.
This morning, I was able to connect some (but not all) of that functionality to the scene.
Here’s the current version.
By clicking/tapping on the blue square you advance on the scene and by clicking on the pixels you turn them on or off. Otherwise, there is no new functionality to consider.
User interaction 3 (Boolean pixels 17)
08/12/11 06:30
We are creating a level editor for our scene.
On the top you have the pixel grid that you’re editing (see figure below). Clicking or tapping turns pixels on or off. When you turn a pixel on it gets the current color. At the middle we have the color selector and at the bottom we have the data that we can paste into our game code.
Here’s the HTML5 canvas implementation.
Here’s some more characters I drew:
On the top you have the pixel grid that you’re editing (see figure below). Clicking or tapping turns pixels on or off. When you turn a pixel on it gets the current color. At the middle we have the color selector and at the bottom we have the data that we can paste into our game code.
Here’s the HTML5 canvas implementation.
Here’s some more characters I drew:
User interaction 2 (Boolean Pixels 16)
07/12/11 07:14
In the second iteration of the pixel editor we check if a pixel happens to be just under the mouse pointer when you click or finger if you’re on a tablet when you tap. If the pixel is on, it’s turned off and if it’s off it’s turned on (NOT gate).
Here’s the HTML5 canvas implementation.
Here’s a couple of creatures I drew:
This one I drew on the iPad:
Here’s the HTML5 canvas implementation.
Here’s a couple of creatures I drew:
This one I drew on the iPad:
User interaction 1 (Boolean Pixels 15)
06/12/11 08:38
I would like an easy way to edit the play field; set pixels on and off, and adjust their color.
The first iteration of the UI listens to mouse down events on the HTML5 canvas and propagates an arrow to the right on the pixel grid (see configuration below).
The first iteration of the UI listens to mouse down events on the HTML5 canvas and propagates an arrow to the right on the pixel grid (see configuration below).
Adding a static layer (Boolean pixels 14)
05/12/11 09:25
When our main character enters the cave I want him to see strange things so I added a static layer of pixel stars that get drawn once we’re underground.
Here’s what it looks like. The pixel stars are updated only every fourth time the clock fires which at 75 milliseconds amounts to 300 ms.
The figure below shows everything we have so far.
Here’s what it looks like. The pixel stars are updated only every fourth time the clock fires which at 75 milliseconds amounts to 300 ms.
The figure below shows everything we have so far.
Moving vertically (Boolean pixels 12)
04/12/11 08:21
Driving on the beach side made me want to enter an underground world so I wanted to add a cave underneath.
To enter the cave we must scroll down and to get back up we have to scroll up. Also, the cave grids have to be underneath the beach side grids so that any given moment we can descend or ascend. Otherwise, there is nothing different from last time. We’re just connecting the grids’ left, right, upper and lower edges together so that we can move around (see figure below).
Here’s the HTML5 canvas implementation.
I also made the background gradient get darker when we enter the cave.
To enter the cave we must scroll down and to get back up we have to scroll up. Also, the cave grids have to be underneath the beach side grids so that any given moment we can descend or ascend. Otherwise, there is nothing different from last time. We’re just connecting the grids’ left, right, upper and lower edges together so that we can move around (see figure below).
Here’s the HTML5 canvas implementation.
I also made the background gradient get darker when we enter the cave.
Adding more screens (Boolean pixels 11)
03/12/11 09:33
Last time, we added another screen to the scene and scrolled two screens because having just one screen gets boring pretty quickly. However, two screens was almost as boring. Let’s add eight screens.
The screens are in this order (from left to right):
Finish line – Gas Station – Tree – Just the Road – Kiosk – Beach gym – Spectators – Start line
The Start line pixel grid is initialized as the one that gets drawn. The other grids are just updated. All the pixels are propagating to the right (see configuration below).
This is what it looks like on our HTML5 canvas.
I left every background structure gray for the moment.
The screens are in this order (from left to right):
Finish line – Gas Station – Tree – Just the Road – Kiosk – Beach gym – Spectators – Start line
The Start line pixel grid is initialized as the one that gets drawn. The other grids are just updated. All the pixels are propagating to the right (see configuration below).
This is what it looks like on our HTML5 canvas.
I left every background structure gray for the moment.
Pixel memory buffer (Boolean pixels 10)
02/12/11 08:18
Yesterday we had two pixel grids on top of each other where one grid scrolled to the left and the other to the right. Both grids were screen wrapped so that when a pixel falls off the edge of the canvas it appears on the opposite side. It gets boring after a while so what if we want more screens?
The solution is to create a pixel grid that gets drawn and another pixel grid that doesn’t get drawn and connect their edges (see configuration below). The other grid acts as an off screen buffer. The pixels in the off screen buffer propagate exactly in the same way as before, you just don’t see them.
Here’s an HTML5 canvas implementation with two background screens and two cars. The first background is with a tree and the other with a kiosk. The cars are an orange car and a black car. Note that the cars are made to go left by pushing pixels to the left, while the background is made to go right by getting the next pixels from the left. Both grids are initialized in exactly the same way.
The solution is to create a pixel grid that gets drawn and another pixel grid that doesn’t get drawn and connect their edges (see configuration below). The other grid acts as an off screen buffer. The pixels in the off screen buffer propagate exactly in the same way as before, you just don’t see them.
Here’s an HTML5 canvas implementation with two background screens and two cars. The first background is with a tree and the other with a kiosk. The cars are an orange car and a black car. Note that the cars are made to go left by pushing pixels to the left, while the background is made to go right by getting the next pixels from the left. Both grids are initialized in exactly the same way.
Going left (Boolean pixels 9)
01/12/11 09:39
Until now, we have been propagating the pixels either right, up or making them not move at all. For example, last time we had a static pixel grid with a background that was moving to the right. What if you want one layer to go right and the other left?
Earlier we have been copying the pixel value (via a logic gate) from the left or upper neighboring pixel. Fortunately, we can reverse the process. By copying a value from the left pixel we scroll right and by copying the value to our left pixel we scroll left (see configuration below).
Here’s what it looks like on the HTML5 canvas.
Earlier we have been copying the pixel value (via a logic gate) from the left or upper neighboring pixel. Fortunately, we can reverse the process. By copying a value from the left pixel we scroll right and by copying the value to our left pixel we scroll left (see configuration below).
Here’s what it looks like on the HTML5 canvas.
Adding a pixel layer on top
30/11/11 10:40
Last time the entire grid of pixels scrolled together propagating their state and their colors. The result was a moving but static image.
What if you want one part moving and another part not moving or two parts moving independently? For that I created a new pixel grid that gets drawn on top of the old one.
Here’s the HTML5 implementation.
In this iteration, the new grid is not updated at all, only drawn, so there are no new logic operations to consider. (Although, there is a term called NOP=No Operation, which means that when the update clock cycle hits the pixels of the new grid, no operation is performed.)
What if you want one part moving and another part not moving or two parts moving independently? For that I created a new pixel grid that gets drawn on top of the old one.
Here’s the HTML5 implementation.
In this iteration, the new grid is not updated at all, only drawn, so there are no new logic operations to consider. (Although, there is a term called NOP=No Operation, which means that when the update clock cycle hits the pixels of the new grid, no operation is performed.)
Propagating colors (Boolean pixels 7)
29/11/11 09:20
In the earlier iterations the colors of the pixels were fixed on the grid. What if I want to propagate the colors? That would allow the creation of shapes. I could even make them move on the pixel grid. To pursue this venture further, I added a nextColor variable. The next color would get copied to the pixel according to the logic mode.
Here’s an HTML5 canvas implementation.
The configuration (cf. diagram below) is fairly simple. Every pixel state is propagated to the left wrapping around the screen. Along with the propagation the color (RGB) and the state (on/off) is copied.
I also added an HTML5 canvas gradient on the background.
Here’s an HTML5 canvas implementation.
The configuration (cf. diagram below) is fairly simple. Every pixel state is propagated to the left wrapping around the screen. Along with the propagation the color (RGB) and the state (on/off) is copied.
I also added an HTML5 canvas gradient on the background.
Boolean pixels 6 change gate configuration
28/11/11 08:10
In iteration 5 we had a pixel face sliding horizontally on the grid. What if I want it to switch and start sliding vertically? The solution was to add a mode variable that controls the logic operation to be performed with the neighboring pixels (see diagram below).
Here’s the HTML5 canvas implementation.
The guy slides ten steps to the right, switches and slides ten steps down, and switches again. I’m using the NOT gate for the effect when sliding down.
Here’s the HTML5 canvas implementation.
The guy slides ten steps to the right, switches and slides ten steps down, and switches again. I’m using the NOT gate for the effect when sliding down.
Boolean Pixels 5 with memory
27/11/11 10:49
After the chaotic patterns of iteration 4 that the XOR gate creates. I thought of concentrating more on order (see configuration diagram below).
Here’s the HTML5 canvas implementation.
The pixels are connected with their left neighbors (wrapping around the grid) and they are initialized with a 100*100 memory pattern.
Here’s the HTML5 canvas implementation.
The pixels are connected with their left neighbors (wrapping around the grid) and they are initialized with a 100*100 memory pattern.
Boolean Pixels 4 (XOR Gate)
26/11/11 09:05
In the fourth iteration I linked an 8*6 grid together with XOR gates (see configuration below).
Here’s the HTML5 Canvas implementation.
Two pixels near the center of the grid are initialized as “on” and others as “off”. I also added some alpha transparency when drawing the black “off” pixels so that they take a few clock cycles to dim away.
It’s interesting to note that this is not in any way random. If you reload the page and start it up again, you’ll get the exact same sequence of patterns every time.
Here’s the HTML5 Canvas implementation.
Two pixels near the center of the grid are initialized as “on” and others as “off”. I also added some alpha transparency when drawing the black “off” pixels so that they take a few clock cycles to dim away.
It’s interesting to note that this is not in any way random. If you reload the page and start it up again, you’ll get the exact same sequence of patterns every time.
Boolean pixels 3
25/11/11 07:01
Last time we connected the pixels with their left neighbors. In this third iteration of boolean pixels, we also connect every pixel with its neighboring upper pixel (see figure below).
In the HTML 5 canvas implementation I initialized a 5*5 grid (25 pixels). Every pixel is connected to its left neighbor and upper neighbor via an OR gate. The upper row is connected to the lower row and the leftmost column is connected to the rightmost column.
All pixels are initialized as off except the one in the middle of the grid.
In the HTML 5 canvas implementation I initialized a 5*5 grid (25 pixels). Every pixel is connected to its left neighbor and upper neighbor via an OR gate. The upper row is connected to the lower row and the leftmost column is connected to the rightmost column.
All pixels are initialized as off except the one in the middle of the grid.
Boolean pixels 2nd iteration
24/11/11 06:32
In the first iteration every pixel was connected to itself via a NOT gate. In the second iteration we chain the pixels together.
The figure below illustrates the configuration. Every pixel is connected to the pixel on its left from where the next value (either on or off) is taken. The current value is propagated to the pixel on the right. In the previous iteration there was only a draw() function. Now there are two functions: update() and draw().
On its first cycle the clock calls update(), which propagates the values, and on the second cycle it calls draw() for every pixel. Here’s an HTML5 canvas implementation of the second iteration. There are five pixels side by side, one of which is initialized as “on” and the others as “off”. The last pixel is chained together with the first pixel.
Like in the first iteration, the clock fires every 500 milliseconds (half a second). However, now that there are two cycles the whole update process takes one second.
I also added a color attribute so that we can have pixels of different color.
The figure below illustrates the configuration. Every pixel is connected to the pixel on its left from where the next value (either on or off) is taken. The current value is propagated to the pixel on the right. In the previous iteration there was only a draw() function. Now there are two functions: update() and draw().
On its first cycle the clock calls update(), which propagates the values, and on the second cycle it calls draw() for every pixel. Here’s an HTML5 canvas implementation of the second iteration. There are five pixels side by side, one of which is initialized as “on” and the others as “off”. The last pixel is chained together with the first pixel.
Like in the first iteration, the clock fires every 500 milliseconds (half a second). However, now that there are two cycles the whole update process takes one second.
I also added a color attribute so that we can have pixels of different color.
Boolean pixels 1st iteration
23/11/11 15:46
Here’s the first iteration (see diagram below):
I designed a class that holds all the necessary variables. The state variable determines whether the pixel is on or off. The variables x and y determine the position of the pixel and the variables width and height determine the pixel’s width and height respectively (for example if we want to use a square or circle to represent the pixel).
Here’s an HTML5 canvas implementation of the first iteration. I’m using a 5*5 grid (=25 pixels) where, starting from the top right, every other pixel is initialized as “on” (red) and every other as “off” (black). The timer fires every 500 milliseconds and calls the draw() function of each pixel. When the draw function is called the pixel switches its state.
I designed a class that holds all the necessary variables. The state variable determines whether the pixel is on or off. The variables x and y determine the position of the pixel and the variables width and height determine the pixel’s width and height respectively (for example if we want to use a square or circle to represent the pixel).
Here’s an HTML5 canvas implementation of the first iteration. I’m using a 5*5 grid (=25 pixels) where, starting from the top right, every other pixel is initialized as “on” (red) and every other as “off” (black). The timer fires every 500 milliseconds and calls the draw() function of each pixel. When the draw function is called the pixel switches its state.
Boolean pixel unit
22/11/11 06:43
The first thing in my quest for creating a boolean pixel grid is to define one element of the grid, that is, the pixel, the logic gate that operates it and a way to attach it to the grid.
Requirements:
First of all, there needs to be a way for the clock to give the pixel its next value. As the Boolean gate reads its inputs from the neighboring pixels (inputs A & B) the output value C is stored into the next variable. We also have the current variable which is the memory location of the pixel’s current value.
Now, there needs to be a way for the clock to trigger a process, for every pixel, where inputs A and B are read from the current value of the neighboring pixels and stored into the next value (by performing a logic operation). Then, again for every pixel, the next value is copied to the current value and the pixel either lights up or dims away.
Requirements:
First of all, there needs to be a way for the clock to give the pixel its next value. As the Boolean gate reads its inputs from the neighboring pixels (inputs A & B) the output value C is stored into the next variable. We also have the current variable which is the memory location of the pixel’s current value.
Now, there needs to be a way for the clock to trigger a process, for every pixel, where inputs A and B are read from the current value of the neighboring pixels and stored into the next value (by performing a logic operation). Then, again for every pixel, the next value is copied to the current value and the pixel either lights up or dims away.
Boolean pixels
21/11/11 10:28
Here’s a crazy thing that I’m planning: I call them boolean pixels. I’m thinking of a grid of pixels (either on or off) that take their next value from the pixel on the left and the pixel on the top left combining these values with a boolean gate. The boolean pixel grid screen wraps so that pixels all the way on the left take their values from pixels all the way on the right (same for up and down). A clock is used to time the setting of the next value. I wonder what kind of a visual effect this could create with different configurations of boolean gates?
Boolean logic gates and their C code 2
19/11/11 09:26
Here’s the XOR and XNOR gates, formulas and their C code:
To test the gates and their outputs I created a C-program. Here it is: main.c
Here’s what it outputs:
Boolean gates
OR gate
0 + 0 = 0
0 + 1 = 1
1 + 0 = 1
1 + 1 = 1
AND gate
0 * 0 = 0
0 * 1 = 0
1 * 0 = 0
1 * 1 = 1
NOR gate
(0 + 0)' = 1
(0 + 1)' = 0
(1 + 0)' = 0
(1 + 1)' = 0
NAND gate
(0 * 0)' = 1
(0 * 1)' = 1
(1 * 0)' = 1
(1 * 1)' = 0
XOR gate
0 ⊕ 0 = 0
0 ⊕ 1 = 1
1 ⊕ 0 = 1
1 ⊕ 1 = 0
XNOR gate
(0 ⊕ 0)'= 1
(0 ⊕ 1)'= 0
(1 ⊕ 0)'= 0
(1 ⊕ 1)'= 1
...
To test the gates and their outputs I created a C-program. Here it is: main.c
Here’s what it outputs:
Boolean gates
OR gate
0 + 0 = 0
0 + 1 = 1
1 + 0 = 1
1 + 1 = 1
AND gate
0 * 0 = 0
0 * 1 = 0
1 * 0 = 0
1 * 1 = 1
NOR gate
(0 + 0)' = 1
(0 + 1)' = 0
(1 + 0)' = 0
(1 + 1)' = 0
NAND gate
(0 * 0)' = 1
(0 * 1)' = 1
(1 * 0)' = 1
(1 * 1)' = 0
XOR gate
0 ⊕ 0 = 0
0 ⊕ 1 = 1
1 ⊕ 0 = 1
1 ⊕ 1 = 0
XNOR gate
(0 ⊕ 0)'= 1
(0 ⊕ 1)'= 0
(1 ⊕ 0)'= 0
(1 ⊕ 1)'= 1
...
Boolean logic gates and their C code
18/11/11 08:16
Here’s a diagram that shows the basic OR, AND, NOT, NOR and NAND boolean operations and how you would code them in C.
Open/close logic for gates/doors
17/11/11 11:33
Here’s a simple thing I implemented this morning. Yesterday I came to a point where the next thing was to get a couple of doors opening and closing in a game I’m working on. I stopped there. Then, this morning I created this flow chart:
and here’s the objective-c code (seems to work):
if (changeCounter--<0) {
if (framesClosed==0||framesOpen==0) return;
if (open) {
open=NO;
changeCounter=framesClosed;
myFrame=closeFrame;
} else {
open=YES;
changeCounter=framesOpen;
myFrame=openFrame;
}
}
and here’s the objective-c code (seems to work):
if (changeCounter--<0) {
if (framesClosed==0||framesOpen==0) return;
if (open) {
open=NO;
changeCounter=framesClosed;
myFrame=closeFrame;
} else {
open=YES;
changeCounter=framesOpen;
myFrame=openFrame;
}
}
...
Design is compromise
17/11/11 08:40
I’m spending more time on Vimeo lately.
As an iOS developer I found this video very inspirational. It’s John Gruber’s keynote speech at Çingleton 2011.
As an iOS developer I found this video very inspirational. It’s John Gruber’s keynote speech at Çingleton 2011.
Scale vision
15/11/11 08:56
Something just occurred to me – a question.
What is the small scale version of your big vision?
Believe it or not I had a summer job working as a janitor in an industrial arts school about twenty years ago. One day, I was called for help to transport a miniature version of a two story train coach from one department to another. While I was pushing the model along the corridor I examined the thing. It was clearly something new. I had never seen anything like that before.
However, about five years later we took a business trip on one of these things. Somehow, I thought the miniature was much cooler than the real thing.
What is the small scale version of your big vision?
Believe it or not I had a summer job working as a janitor in an industrial arts school about twenty years ago. One day, I was called for help to transport a miniature version of a two story train coach from one department to another. While I was pushing the model along the corridor I examined the thing. It was clearly something new. I had never seen anything like that before.
However, about five years later we took a business trip on one of these things. Somehow, I thought the miniature was much cooler than the real thing.
DIY programming
14/11/11 08:56
Do it yourself programming is a “mental space” which is not only fun and meditative but it allows you to create your own set of tools and skills. However, it takes zen-like discipline.
Using someone’s third party libraries is not DIY programming (unless you know and respect the guy). Using a lot of different technologies, scripts and tools is not necessarily DIY programming.
Programming directly for the platform using the platform’s APIs is DIY programming.
Succeeding with your own DIY code is a lot of work. However, in the end it pays off. You get to create things for your associates, for your clients and for yourself.
Compare:”Here, I made this for you.” vs. “I’ve found something that might work for us. Others are using it too.”
The life long learner and the craftsman is a DIY programmer.
Using someone’s third party libraries is not DIY programming (unless you know and respect the guy). Using a lot of different technologies, scripts and tools is not necessarily DIY programming.
Programming directly for the platform using the platform’s APIs is DIY programming.
Succeeding with your own DIY code is a lot of work. However, in the end it pays off. You get to create things for your associates, for your clients and for yourself.
Compare:”Here, I made this for you.” vs. “I’ve found something that might work for us. Others are using it too.”
The life long learner and the craftsman is a DIY programmer.
Where to settle?
09/11/11 19:51
I started out programming when I was about seven years old on the Spectravideo 328. I went to elementary school on Long Island and there I had access to a laboratory area with VT100 terminals and Sun Sparc Stations. Then I had a real MSX machine, access to an Apple II and an IBM XT - then I got the Amiga 500. Then later at the university we had Unix and Linux systems. Windows and Solaris at work. Assembly, Basic and Pascal in the 80s, C and Java in the 90s, PHP, MySQL and ActionScript in ’00.
Today Unix, Cocoa and Objective-C is fine with me.
The question of which technology to choose is not an easy one. I guess the main thing is not to get too attached. Programmers have daily “Eureka” moments while programming so getting attached to gadgets, systems and programming languages is evident - it’s in the chemistry of the brain.
However, the truth is that technology platforms die every day (since January 1, 1970). If you’re on a dying platform a good idea is to acknowledge that’s its soon going to be over (with a cool mind) and just start gradually switching to something else.
Here’s a snapshot of top 100 skills in demand on Elance. It’s a pretty good trend indicator.
source: https://www.elance.com/q/online-employment-report
(scroll to the bottom of the page to see the table).
Today Unix, Cocoa and Objective-C is fine with me.
The question of which technology to choose is not an easy one. I guess the main thing is not to get too attached. Programmers have daily “Eureka” moments while programming so getting attached to gadgets, systems and programming languages is evident - it’s in the chemistry of the brain.
However, the truth is that technology platforms die every day (since January 1, 1970). If you’re on a dying platform a good idea is to acknowledge that’s its soon going to be over (with a cool mind) and just start gradually switching to something else.
Here’s a snapshot of top 100 skills in demand on Elance. It’s a pretty good trend indicator.
source: https://www.elance.com/q/online-employment-report
(scroll to the bottom of the page to see the table).
Thinking on paper "too good to be true"
26/10/11 08:56
I always use pen and paper alongside programming. I feel slightly crippled without it. It gives a wider structure to what I’m doing and it helps to concentrate. It’s extremely fast. I can create my own format, symbols, create a mind map or a todo list, and whatever diagrams or words I come up with (from the completely abstract down to practical steps).
I normally use notebooks with a black hardcover.
[Sometimes when I visit an office or a cubicle area I see desks with an A4 on the wall with something on it that looks like a complex wireframe. Most of the time, the A4 looks like it has been hanging there for quite a while. Maybe you could glue that paper into a notebook and start putting your new thoughts/wireframes there?]
Here’s what I did before I started writing this blog post:
I normally use notebooks with a black hardcover.
[Sometimes when I visit an office or a cubicle area I see desks with an A4 on the wall with something on it that looks like a complex wireframe. Most of the time, the A4 looks like it has been hanging there for quite a while. Maybe you could glue that paper into a notebook and start putting your new thoughts/wireframes there?]
Here’s what I did before I started writing this blog post:
#uDevGames #Dicetris Postmortem/Pre-natal
13/10/11 08:35
As the uDevGames Mac game programming contest closes today Dicetris is gradually moving from its uDevGames entry page to its own site.
This mini postmortem will briefly highlight the main advancements and stumbling blocks that occurred during the development of the game.
The project started out 7.7.2011 when I heard of uDevGames for the first time on the Cheetah 3D forum. The first thing I thought about was a simple point and click adventure game. I had just played a couple of experimental HTML5 point and click adventure games on the iPad and was kind of excited about them. However, I couldn’t get hold of an artist that could share my enthusiasm.
About a year back during a brainstorming session, I had scribbled about twenty game titles on the back of a notebook. One of them was Dicetris. The question was: what if there was a Tetris like game with Dice? All in all, it didn’t sound like a difficult idea to implement.
What went right
Gradually, we started building the team. Bongorok (Jukka Kiviniemi) got in touch with me to lay down a couple of Rhodes tracks for an artist called Neveready. During the sessions (we use Skype and DropBox) I mentioned about Dicetris. As Tetris has a ton of music on it we thought that Dicetris could actually be not only a game but an album as well. For each level and end monster there would be a soundtrack. Eventually, we would build levels and tracks side by side. Bongorok liked the idea and we started throwing musical ideas at each other.
Bongorok was the first to suggest a low resolution approach, i.e., kind of like a mix between 8 bit chip music and dub. Some of the original Dance Hall riddims were actually produced using low resolution Japanese keyboards - production methods that we already had experimented on in the past. We also found a german record label that continues this tradition and even seems to go further. Later on when former Accolade artist Mike Parisi suggested we’d go 4-bit. I knew instantly that this would be the style that we had to approach.
What went wrong
Due to time constraints we only managed to get one track and one level done for the competition entry. Every monday we met on Skype, revised the tracks and made production decisions. Initially, we were going for kind of a space rock / jazz uptempo feel. However, this did not seem to work out because the songs ended up becoming monolithic and very difficult to produce any further. Also, they just didn’t sound like game music. At this time we were already more than a month into the competition.
While most of the work was going fairly well with music, the graphics and the game engine were lagging behind. This was partly due to lack of resources (we’re all busy entrepreneurs) and lack of initiative in the early stage. Basically, the entire team was formed only one week before the deadline which is when we actually started working (seriously) on the game.
Next steps
While 4-bit and chip dub are awesome concepts, they are not that easy to produce. However, we have the technology, the vision and the framework in place. Moreover, we have an awesome team. Our next steps are continuing with the rest of the levels and the music tracks and continuing with the story. Meanwhile, we are attending a music marketing competition later in November.
Be sure to check us out on dicetris.com.
This mini postmortem will briefly highlight the main advancements and stumbling blocks that occurred during the development of the game.
The project started out 7.7.2011 when I heard of uDevGames for the first time on the Cheetah 3D forum. The first thing I thought about was a simple point and click adventure game. I had just played a couple of experimental HTML5 point and click adventure games on the iPad and was kind of excited about them. However, I couldn’t get hold of an artist that could share my enthusiasm.
About a year back during a brainstorming session, I had scribbled about twenty game titles on the back of a notebook. One of them was Dicetris. The question was: what if there was a Tetris like game with Dice? All in all, it didn’t sound like a difficult idea to implement.
What went right
Gradually, we started building the team. Bongorok (Jukka Kiviniemi) got in touch with me to lay down a couple of Rhodes tracks for an artist called Neveready. During the sessions (we use Skype and DropBox) I mentioned about Dicetris. As Tetris has a ton of music on it we thought that Dicetris could actually be not only a game but an album as well. For each level and end monster there would be a soundtrack. Eventually, we would build levels and tracks side by side. Bongorok liked the idea and we started throwing musical ideas at each other.
Bongorok was the first to suggest a low resolution approach, i.e., kind of like a mix between 8 bit chip music and dub. Some of the original Dance Hall riddims were actually produced using low resolution Japanese keyboards - production methods that we already had experimented on in the past. We also found a german record label that continues this tradition and even seems to go further. Later on when former Accolade artist Mike Parisi suggested we’d go 4-bit. I knew instantly that this would be the style that we had to approach.
What went wrong
Due to time constraints we only managed to get one track and one level done for the competition entry. Every monday we met on Skype, revised the tracks and made production decisions. Initially, we were going for kind of a space rock / jazz uptempo feel. However, this did not seem to work out because the songs ended up becoming monolithic and very difficult to produce any further. Also, they just didn’t sound like game music. At this time we were already more than a month into the competition.
While most of the work was going fairly well with music, the graphics and the game engine were lagging behind. This was partly due to lack of resources (we’re all busy entrepreneurs) and lack of initiative in the early stage. Basically, the entire team was formed only one week before the deadline which is when we actually started working (seriously) on the game.
Next steps
While 4-bit and chip dub are awesome concepts, they are not that easy to produce. However, we have the technology, the vision and the framework in place. Moreover, we have an awesome team. Our next steps are continuing with the rest of the levels and the music tracks and continuing with the story. Meanwhile, we are attending a music marketing competition later in November.
Be sure to check us out on dicetris.com.
Nobody does that anymore
29/09/11 04:45
I was listening to a radio show the other day where they talked about good old special effects that movies used to have before the CGI era stepped in. The cynical argument was the old “they don’t make them like they used to,” which of course is true.
In the gaming industry, it seems, there’s not a lot of room for retro when big titles are the ones getting promoted. In the good old days you wouldn’t ever hear the phrase “Everyone’s playing games.” Games were a lot harder and there were other dimensions involved. You went to the arcade to hang around and meet people. Or at home you had friends over and experienced memorable moments on silly 8 and 16 bit games.
I think there’s a need to revive this culture.
In the gaming industry, it seems, there’s not a lot of room for retro when big titles are the ones getting promoted. In the good old days you wouldn’t ever hear the phrase “Everyone’s playing games.” Games were a lot harder and there were other dimensions involved. You went to the arcade to hang around and meet people. Or at home you had friends over and experienced memorable moments on silly 8 and 16 bit games.
I think there’s a need to revive this culture.
How video-games are changing education
11/09/11 23:22
Via: Online Colleges Guide
[Is there something missing in this model?]
Video-game play: Abstraction vs. Simulation, Goal-driven vs. Arbitrary
10/09/11 19:40
Below, I’ve reproduced my version of Dr. Puentedura’s graph* about the abstractions and goals of a video-game where I have tried to place some of my favorite video games. Puentedura’s discovery is that games that are goal-driven simulations tend to be more narrative while abstract games with arbitrary goals tend to be less narrative.
*(R. Puentedura, Game and Learn: An Introduction to Educational Gaming. Link to podcast.)
The definition of a game
10/09/11 07:24
The formal definition of a game according to Salen & Zimmerman goes: “A game is a system in which players engage in an artificial conflict, defined by rules, that results in a quantifiable outcome.”
All games contain a challenge, rules and an outcome (feedback). In the lack of one of these elements we are not talking about a game but a toy or something else. So playing a game is a more restricted subset of playing in general.
In education it is possible to map the elements between learning and playing. For example, consider the following spelling game:
The challenge:
The class is separated into two groups. Taking turns, each group is given a word to spell.
The rules:
If the person who’s turn it is in the group spells the word correctly, the turn will switch to the other group. If not the same group will continue to try to spell a new word that is given.
Quantifiable outcome:
For every word spelled correctly the group gains a point. In the end the points are calculated. However, the rules of the game are tweaked in a way that it’s always a tie. The artificial conflict makes all participants gain insight into spelling.
[Of course, these rules can be tweaked in any way possible. The point is that goals in education (of any level) have a direct mapping with playing games. This, of course, is natural because play triggers learning processes that are built into us.]
All games contain a challenge, rules and an outcome (feedback). In the lack of one of these elements we are not talking about a game but a toy or something else. So playing a game is a more restricted subset of playing in general.
In education it is possible to map the elements between learning and playing. For example, consider the following spelling game:
The challenge:
The class is separated into two groups. Taking turns, each group is given a word to spell.
The rules:
If the person who’s turn it is in the group spells the word correctly, the turn will switch to the other group. If not the same group will continue to try to spell a new word that is given.
Quantifiable outcome:
For every word spelled correctly the group gains a point. In the end the points are calculated. However, the rules of the game are tweaked in a way that it’s always a tie. The artificial conflict makes all participants gain insight into spelling.
[Of course, these rules can be tweaked in any way possible. The point is that goals in education (of any level) have a direct mapping with playing games. This, of course, is natural because play triggers learning processes that are built into us.]
The definition of play
09/09/11 06:13
As Dr. Puentedura points out in the first episode of his podcast series, our closest primate relatives (Chimps) exercise in playful activities so it is safe to bet that we have been playing about a million years.
He also asks an interesting question: It seems at first that playing is a non productive activity. So why do we play?
Vygotsky thought about this in his general theory of learning. He compares what a child/person can learn by herself and what she can learn with the help of a “more knowledgeable other”. The theory goes on to suggest that when you’re playing you become a virtual “more knowledgeable other”.
So from the beginning while we adapt things from the outside world we also act as our own teachers as we find out things for ourselves. As we adapt and learn our skills and knowledge expand iteratively. Do we see it as a beautiful process of discovery, seeking, exploring, growing, blooming, a non-violent process without conflict?
He also asks an interesting question: It seems at first that playing is a non productive activity. So why do we play?
Vygotsky thought about this in his general theory of learning. He compares what a child/person can learn by herself and what she can learn with the help of a “more knowledgeable other”. The theory goes on to suggest that when you’re playing you become a virtual “more knowledgeable other”.
So from the beginning while we adapt things from the outside world we also act as our own teachers as we find out things for ourselves. As we adapt and learn our skills and knowledge expand iteratively. Do we see it as a beautiful process of discovery, seeking, exploring, growing, blooming, a non-violent process without conflict?
Educational gaming
03/09/11 05:52
I found a nice serie of talks on educational gaming by Dr. Ruben R. Puentedura.
I’m looking towards educational gaming, not only because my wife is a teacher, but also because we’re currently involved in a game project that involves the preservation of and learning about rare anthropod species in different locations including California, South Africa and Australia. There seems to be an interest in this in the academic world.
Learning by doing and by interacting is a good way to gain a critical view of the world. Educational gaming is a fun way for students to play with the subject in given constraints and gain a personal perspective through the experience of the gaming session.
Educational gaming is a growing area of opportunities for game designers. After all, more and more iPads are finding their way into schools and classrooms. Educational games specially handcrafted for pedagogical needs seem to be growing in demand.
If you have an educational game handcrafted for your school, course or organization in mind get in contact.
I’m looking towards educational gaming, not only because my wife is a teacher, but also because we’re currently involved in a game project that involves the preservation of and learning about rare anthropod species in different locations including California, South Africa and Australia. There seems to be an interest in this in the academic world.
Learning by doing and by interacting is a good way to gain a critical view of the world. Educational gaming is a fun way for students to play with the subject in given constraints and gain a personal perspective through the experience of the gaming session.
Educational gaming is a growing area of opportunities for game designers. After all, more and more iPads are finding their way into schools and classrooms. Educational games specially handcrafted for pedagogical needs seem to be growing in demand.
If you have an educational game handcrafted for your school, course or organization in mind get in contact.
Trust in creativity
02/09/11 11:41
Getting picky of specifics in the beginning might kill a project that was bound to be successful. Buyers often want security and if they don’t hear the right signals, or if they hear wrong signals, they often won’t have the courage or the patience to pursue and work through the project.
Note: Providers should be careful when choosing a buyer that doesn’t seem to have a realistic view on when and how much they are expecting returns on their investment, that is, investment in your work. Too often, especially in mobile app development, it seems to be the case that the buyer expects rapid returns which most of the time results in disappointment.
The craftsman type provider must adopt a style that fits both the worldview of his potential clients and his own worldview. This is when trust becomes a foundation that supports the project. When there is trust the specifics do not matter that much.
Trust allows inaccurate communication, strange behavior and irrational reasoning. It allows the qualitative and the quantitative to mix and match. It allows all which is humane and it creates a firm basis for creativity and productivity.
True trust is not disposable. It cannot be demonstrated in a week.
Note: Providers should be careful when choosing a buyer that doesn’t seem to have a realistic view on when and how much they are expecting returns on their investment, that is, investment in your work. Too often, especially in mobile app development, it seems to be the case that the buyer expects rapid returns which most of the time results in disappointment.
The craftsman type provider must adopt a style that fits both the worldview of his potential clients and his own worldview. This is when trust becomes a foundation that supports the project. When there is trust the specifics do not matter that much.
Trust allows inaccurate communication, strange behavior and irrational reasoning. It allows the qualitative and the quantitative to mix and match. It allows all which is humane and it creates a firm basis for creativity and productivity.
True trust is not disposable. It cannot be demonstrated in a week.
Game programming books 101
08/08/11 11:22
Since the dawn of time (about three years ago) I’ve kept current with the relevant introductory game programming books. If you think I’m missing out on something here please send me a message.
I started out as an ActionScript 3.0 game developer and the best 2 books ever are Foundation ActionScript 3.0 Animation: Making Things Move!
and AdvancED ActionScript 3.0 Animation
by Keith Peters. I can’t overstate the value of these two books. I’ve made a lot of dough with the algorithms and methods in there, so thank you Keith! (just between you and me: I’ve converted all the Vehicle algorithms to GLKit ).
There’s actually an HTML5 version of these coming out. It’s called Foundation HTML5 Animation with JavaScript
. I’ve ditched ActionScript 3.0 (sorry) but I’m looking forward to redoing most of my stuff with HTML5 & JavaScript (maybe next year). I’m a really lazy programmer in the sense that I love ready recipes to add to my toolset, so I’m definitely looking forward to this book.
For the iPhone the killer (still) is: Beginning iPhone Games Development
. This book blew my mind basically and I still haven’t finished it! It’s the leap from procedural game programming into creating your own object-based game engine. However, there’s a new version of this coming out soon which is called Beginning iOS Games Development
. Another one that I’ve pre-ordered.
Finally, what I’m really waiting for (itching) is Beginning Mac OS X Lion Game Apps Development
. It’s a shame this book isn’t out already because I would be needing it for my first Mac game. (We’re attending uDevGames Mac game programming contest with our entry called Dicetris.)
Then of course, there are other books but those are the ones with the basic chops.
[I forgot this & this book.]
I started out as an ActionScript 3.0 game developer and the best 2 books ever are Foundation ActionScript 3.0 Animation: Making Things Move!
and AdvancED ActionScript 3.0 Animation by Keith Peters. I can’t overstate the value of these two books. I’ve made a lot of dough with the algorithms and methods in there, so thank you Keith! (just between you and me: I’ve converted all the Vehicle algorithms to GLKit ).There’s actually an HTML5 version of these coming out. It’s called Foundation HTML5 Animation with JavaScript
. I’ve ditched ActionScript 3.0 (sorry) but I’m looking forward to redoing most of my stuff with HTML5 & JavaScript (maybe next year). I’m a really lazy programmer in the sense that I love ready recipes to add to my toolset, so I’m definitely looking forward to this book.For the iPhone the killer (still) is: Beginning iPhone Games Development
. This book blew my mind basically and I still haven’t finished it! It’s the leap from procedural game programming into creating your own object-based game engine. However, there’s a new version of this coming out soon which is called Beginning iOS Games Development. Another one that I’ve pre-ordered.Finally, what I’m really waiting for (itching) is Beginning Mac OS X Lion Game Apps Development
. It’s a shame this book isn’t out already because I would be needing it for my first Mac game. (We’re attending uDevGames Mac game programming contest with our entry called Dicetris.)Then of course, there are other books but those are the ones with the basic chops.
[I forgot this & this book.]
Frameskipping demo
01/08/11 04:02
This is day 4 of the frameskipping study. During day 1 we solved how to slow down frames and during day 2 how to speed up an animation by skipping frames. Yesterday we created the algorithms and today it is implementation time!
Here’s the demo:
Skipper
[new version with a couple of bug fixes.]
Inside the zip file is the Skipper.app demo and the Xcode project. Just double-click the app to launch or use Xcode to compile it yourself. Here’s a screenshot:
In the middle there’s a head that runs at the original animation speed (i.e., s=1.0) and on the sides there are two heads who’s speeds you control with two sliders. The speeds range from 0.0 (stopped) to 2.0 (double speed).
The interesting part is in the update method of the Head class which I happened to implement like this (there’s probably better ways to implement it):
-(void)update
{
NSTimeInterval Dn=1.0f/30.0f/s;
NSTimeInterval Do=1.0f/30.0f;
NSTimeInterval Da=[lastUpdated timeIntervalSinceNow];
//normal speed
if (s==1.0) {
[self nextFrame];
}
//slow down
else if (s<1.0) {
if (Dn<-Da) {
[self nextFrame];
} else {
return;
}
}
//speed up
else {
if (Da+2*Dn < Do) {
[self skipFrame];
return;
} else {
[self nextFrame];
}
}
}
[If you happen have any questions of comments just send me note and I’ll get back to you.]
That wraps up the frameskipping study. It is a common application for 2D games which have pre-rendered animation frames that need to be rendered at different speeds. Delaying the animation is a trivial task to make the animation go slower. However, speeding up past the refresh rate of the application requires you to figure out a way to skip frames at times in order to create an illusion that the animation is actually going faster.
I’ve done a couple of implementations like these already but I never looked at what’s actually happening. (I just hacked away with counters and timers until it started to look ok.) I feel the study was worth it because In the end the implementation was quite simple.
Quantized animation is fun and works especially in retro games but also in modern games that have a lot of animated sprites. Now that the thing is somewhat under control I feel the next step might be linking this to a physical phenomena, like a pre-rendered animated ball with mass and inertia or a more complex ray-traced machine model or synchronized video. In any case I’ll definitely be using this in the future. I can already think of many ways to improve and build on this!
Here’s the demo:
Skipper
[new version with a couple of bug fixes.]
Inside the zip file is the Skipper.app demo and the Xcode project. Just double-click the app to launch or use Xcode to compile it yourself. Here’s a screenshot:
In the middle there’s a head that runs at the original animation speed (i.e., s=1.0) and on the sides there are two heads who’s speeds you control with two sliders. The speeds range from 0.0 (stopped) to 2.0 (double speed).
The interesting part is in the update method of the Head class which I happened to implement like this (there’s probably better ways to implement it):
-(void)update
{
NSTimeInterval Dn=1.0f/30.0f/s;
NSTimeInterval Do=1.0f/30.0f;
NSTimeInterval Da=[lastUpdated timeIntervalSinceNow];
//normal speed
if (s==1.0) {
[self nextFrame];
}
//slow down
else if (s<1.0) {
if (Dn<-Da) {
[self nextFrame];
} else {
return;
}
}
//speed up
else {
if (Da+2*Dn < Do) {
[self skipFrame];
return;
} else {
[self nextFrame];
}
}
}
[If you happen have any questions of comments just send me note and I’ll get back to you.]
That wraps up the frameskipping study. It is a common application for 2D games which have pre-rendered animation frames that need to be rendered at different speeds. Delaying the animation is a trivial task to make the animation go slower. However, speeding up past the refresh rate of the application requires you to figure out a way to skip frames at times in order to create an illusion that the animation is actually going faster.
I’ve done a couple of implementations like these already but I never looked at what’s actually happening. (I just hacked away with counters and timers until it started to look ok.) I feel the study was worth it because In the end the implementation was quite simple.
Quantized animation is fun and works especially in retro games but also in modern games that have a lot of animated sprites. Now that the thing is somewhat under control I feel the next step might be linking this to a physical phenomena, like a pre-rendered animated ball with mass and inertia or a more complex ray-traced machine model or synchronized video. In any case I’ll definitely be using this in the future. I can already think of many ways to improve and build on this!
Frameskipping at variable speeds Part 3
31/07/11 00:08
Yesterday we solved the mystery of “frameskipping” which is creating the illusion of an animation speeding up by skipping frames here and there. This is when we cannot increase the frame rate due to constraints such as the screen refresh rate or the maximum fps you can get in your game loop. By delaying frames we can slow down an animation but by skipping frames we can make it go faster! Any animation also has a “natural” or normal speed which is when we advance the frames sequentially in sync with our refresh rate.
(Side note: It is up to the developer and designer to agree upon a frame rate with which the designer can go ahead and start creating the animation. It is only after the creation of the animation that the developer can start to do cool stuff with it. Here, we are concerned with that phase.)
Here’s a diagram that illustrates the entire situation:
When the animation runs at normal speed, every frame in our game loop corresponds to every frame in the animation loop. Every time we enter the game loop we just advance one frame and the animation runs nicely.
Then, if we’re slowing down the animation by a factor s we calculate a new delay Dn=Do/s, where Do is the animation’s natural frame rate. (For example, at 30 fps if we’re designing an animation for that frame rate.)
Finally, if we want to speed up the animation there will be, in theory, one or two animation frames during one frame of the game loop. Whether we just advance or skip a frame depends on if the beginning of the frame after the next frame falls on the current game loop frame. Now the only thing missing is to come up with an algorithm that determines this.
Let’s look at the game loop and the sped up animation loop side by side. The figure shows which frame to skip (marked with an oval) and which Animation Loop Frames correspond to which Game Loop Frames (marked with an arrow):
Let Da be the time since we last advanced a frame in the Animation Loop. The time since we refreshed our game loop is zero. Let the next time we will refresh the game loop will happen be Do (for example 1/60 if we’re running at 60 hertz).
As before for the new delay we have Dn=s*Do.
To check if the frame after the next frame falls within the current game loop frame we calculate Da+2*Dn and compare it with Do. Now that sounds simple!
All right, so here are all the cases and their algorithms:
Let s be the fraction of the normal speed of the animation.
(Every time we enter our game loop) we have:
Normal speed or s=1: Advance the animation one frame.
Slowdown or s<1: Calculate the current delay for the frame Dn=s*Do. Take Da, the time passed since we advanced a frame. If Dn is smaller then Da then advance and if not stay on the current frame.
Speed up or s>1: Calculate the current delay Dn=s*Do. Take Da, the time passed since we advanced a frame. If Da+2*Dn is smaller than Do then skip a frame (by advancing 2 frames) and if not just advance one frame.
Looks doable, doesn’t it? Tomorrow the implementation.
(Side note: It is up to the developer and designer to agree upon a frame rate with which the designer can go ahead and start creating the animation. It is only after the creation of the animation that the developer can start to do cool stuff with it. Here, we are concerned with that phase.)
Here’s a diagram that illustrates the entire situation:
When the animation runs at normal speed, every frame in our game loop corresponds to every frame in the animation loop. Every time we enter the game loop we just advance one frame and the animation runs nicely.
Then, if we’re slowing down the animation by a factor s we calculate a new delay Dn=Do/s, where Do is the animation’s natural frame rate. (For example, at 30 fps if we’re designing an animation for that frame rate.)
Finally, if we want to speed up the animation there will be, in theory, one or two animation frames during one frame of the game loop. Whether we just advance or skip a frame depends on if the beginning of the frame after the next frame falls on the current game loop frame. Now the only thing missing is to come up with an algorithm that determines this.
Let’s look at the game loop and the sped up animation loop side by side. The figure shows which frame to skip (marked with an oval) and which Animation Loop Frames correspond to which Game Loop Frames (marked with an arrow):
Let Da be the time since we last advanced a frame in the Animation Loop. The time since we refreshed our game loop is zero. Let the next time we will refresh the game loop will happen be Do (for example 1/60 if we’re running at 60 hertz).
As before for the new delay we have Dn=s*Do.
To check if the frame after the next frame falls within the current game loop frame we calculate Da+2*Dn and compare it with Do. Now that sounds simple!
All right, so here are all the cases and their algorithms:
Let s be the fraction of the normal speed of the animation.
(Every time we enter our game loop) we have:
Normal speed or s=1: Advance the animation one frame.
Slowdown or s<1: Calculate the current delay for the frame Dn=s*Do. Take Da, the time passed since we advanced a frame. If Dn is smaller then Da then advance and if not stay on the current frame.
Speed up or s>1: Calculate the current delay Dn=s*Do. Take Da, the time passed since we advanced a frame. If Da+2*Dn is smaller than Do then skip a frame (by advancing 2 frames) and if not just advance one frame.
Looks doable, doesn’t it? Tomorrow the implementation.
Frameskipping at variable speeds Part 2
29/07/11 18:13
Yesterday we looked at how to delay frames in order to slow down a pre-rendered animation in a game loop. Today, we look at how to speed up an animation in a game loop by skipping frames.
Instead of a walking animation let’s think of a different animation that consists of 97 frames and looks something like this:
Let’s assume our game runs at 30 fps. The customer calls me and says:”I want that head to spin at different speeds! Speeding up and slowing down.”
From yesterday we already know that in order to slow down the animation we have to delay the frames and to speed up the animation we need to skip the frames.
For delaying or slowdown we have the formula Dn=Do/s where Dn is the new delay Do is the current frame rate of the game and s is the ratio of how much slower we want the animation to run. (for example if we have a game that runs at 30 fps and we want the animation to run at half speed we get: 1/30*2 = 2/30 seconds.) Once 2/30 seconds have passed you advance the frame. Simple!
What about speedup? To get double speed we need to skip every other frame but what about the other speeds between the normal speed and the double speed? It seems we have to skip a frame once in a while but when?
It seems during our game loop we need to test if the next frame is already a thing of the past. If so then skip that frame. How do we decide that?
Let’s gather up the variables. The game runs at 30 fps. The animation runs at X frames per second where X>30. We enter the game loop every 1/30 seconds. The timeline of both the animation frames and the game loop frames looks something like this:
Looking at the picture, we see that initially on the first frame we have Animation Frame 1 and Game loop Frame 1. Then the timer fires again for the next frame of the game loop and we’re in Frame 2 of the Game loop. On Game loop Frame 2 we see that the Animation Frame 3 is already coming in so we skip Frame 2. Cool!
Then we come to Game loop Frame 3 and we switch to Frame 4 in the Animation. Game loop Frame 4 and animation Frame 5, so far so good. Then there’s Game loop frame 5 that already ends at Animation loop Frame 7 so we skip Animation frame 6 altogether and advance directly from Frame 5 to Frame 7 and on Game loop Frame 6 we advance to Animation frame 8. Here’s what it looks like on the timeline (the frames to be skipped are marked with a red oval):
This seems to imply that if the frame after the next frame is starting during the current game loop frame then we skip a frame. That sounds simple enough!
Tomorrow the wrap up, the formulas and the algorithm for skipping frames and delaying frames.
Instead of a walking animation let’s think of a different animation that consists of 97 frames and looks something like this:
Let’s assume our game runs at 30 fps. The customer calls me and says:”I want that head to spin at different speeds! Speeding up and slowing down.”
From yesterday we already know that in order to slow down the animation we have to delay the frames and to speed up the animation we need to skip the frames.
For delaying or slowdown we have the formula Dn=Do/s where Dn is the new delay Do is the current frame rate of the game and s is the ratio of how much slower we want the animation to run. (for example if we have a game that runs at 30 fps and we want the animation to run at half speed we get: 1/30*2 = 2/30 seconds.) Once 2/30 seconds have passed you advance the frame. Simple!
What about speedup? To get double speed we need to skip every other frame but what about the other speeds between the normal speed and the double speed? It seems we have to skip a frame once in a while but when?
It seems during our game loop we need to test if the next frame is already a thing of the past. If so then skip that frame. How do we decide that?
Let’s gather up the variables. The game runs at 30 fps. The animation runs at X frames per second where X>30. We enter the game loop every 1/30 seconds. The timeline of both the animation frames and the game loop frames looks something like this:
Looking at the picture, we see that initially on the first frame we have Animation Frame 1 and Game loop Frame 1. Then the timer fires again for the next frame of the game loop and we’re in Frame 2 of the Game loop. On Game loop Frame 2 we see that the Animation Frame 3 is already coming in so we skip Frame 2. Cool!
Then we come to Game loop Frame 3 and we switch to Frame 4 in the Animation. Game loop Frame 4 and animation Frame 5, so far so good. Then there’s Game loop frame 5 that already ends at Animation loop Frame 7 so we skip Animation frame 6 altogether and advance directly from Frame 5 to Frame 7 and on Game loop Frame 6 we advance to Animation frame 8. Here’s what it looks like on the timeline (the frames to be skipped are marked with a red oval):
This seems to imply that if the frame after the next frame is starting during the current game loop frame then we skip a frame. That sounds simple enough!
Tomorrow the wrap up, the formulas and the algorithm for skipping frames and delaying frames.
Frameskipping at variable speeds Part 1
29/07/11 10:05
Let’s imagine you have a film running at 30 fps (a walking animation). Let’s also imagine you have a pair of scissors in your hand and decide to cut every other frame out of the film and glue the remaining parts together. If you put this film back into the projector and run it at the same speed the walking animation will run at twice the speed on the big screen.
The following figure illustrates this:
As you can see in the figure A and B will run twice as fast if put into a film projector that runs at a constant speed. This is somewhat similar to pulldown.
Note also that A and B are basically the same animation only that A has all the frames B doesn’t and vice versa.
Now, let’s say this is a walking animation loop in a game running at 60 fps.
What if I want to run this animation at, say, one third of the speed or two thirds of the speed? That’s easy. I just delay the frames for a while. At normal speed (60 Hertz) I delay the frames 1/60 seconds. If I want half speed the delay is 1/30 and if I want 2/3 of the speed its 3/2*1/60 or 1/40 seconds. During the main loop I check if this much time has elapsed and if so I advance the frame and if not I stay where I’m at.
Therefore for slowdown we have: Dn=Do/s, where Do is the original delay and s is the fraction of the current speed you want the new speed to become and Dn is the new delay. Now during my game loop I can adjust s, check for Dn and advance the frames. Problem solved.
What about speeding up? We already saw that by cutting out every other frame we can speed up the movie twice the original speed. (note: We could have sped up the film by making the projector run faster but here we assume the projector is running at a constant speed, just as your game loop is running at 60 hertz.)
By cutting every other frame we get double the speed but what if we want say 5/4 or 6/5 of the speed? Better yet, is there a way to skip these frames so that we can tell the animation to run at any speed?
The solution it seems is that sometimes I will have to skip a frame or two and sometimes just advance one frame but when?
[Note: I haven’t searched if this has been done earlier. It probably has. However, it’s more fun to figure things out for yourself rather than just rely on references - you even get to give the solution a name.]
So I have a walking animation loop that runs at normal speed when I display all frames subsequently at 60 hertz and I want to be able to skip frames to bring up the illusion of the animation going faster. Not only twice the speed but any new speed denoted by Sn.
Tomorrow the solution.
The following figure illustrates this:
As you can see in the figure A and B will run twice as fast if put into a film projector that runs at a constant speed. This is somewhat similar to pulldown.
Note also that A and B are basically the same animation only that A has all the frames B doesn’t and vice versa.
Now, let’s say this is a walking animation loop in a game running at 60 fps.
What if I want to run this animation at, say, one third of the speed or two thirds of the speed? That’s easy. I just delay the frames for a while. At normal speed (60 Hertz) I delay the frames 1/60 seconds. If I want half speed the delay is 1/30 and if I want 2/3 of the speed its 3/2*1/60 or 1/40 seconds. During the main loop I check if this much time has elapsed and if so I advance the frame and if not I stay where I’m at.
Therefore for slowdown we have: Dn=Do/s, where Do is the original delay and s is the fraction of the current speed you want the new speed to become and Dn is the new delay. Now during my game loop I can adjust s, check for Dn and advance the frames. Problem solved.
What about speeding up? We already saw that by cutting out every other frame we can speed up the movie twice the original speed. (note: We could have sped up the film by making the projector run faster but here we assume the projector is running at a constant speed, just as your game loop is running at 60 hertz.)
By cutting every other frame we get double the speed but what if we want say 5/4 or 6/5 of the speed? Better yet, is there a way to skip these frames so that we can tell the animation to run at any speed?
The solution it seems is that sometimes I will have to skip a frame or two and sometimes just advance one frame but when?
[Note: I haven’t searched if this has been done earlier. It probably has. However, it’s more fun to figure things out for yourself rather than just rely on references - you even get to give the solution a name.]
So I have a walking animation loop that runs at normal speed when I display all frames subsequently at 60 hertz and I want to be able to skip frames to bring up the illusion of the animation going faster. Not only twice the speed but any new speed denoted by Sn.
Tomorrow the solution.
GPU Gems: Part I - Natural Effects
27/07/11 21:11
Testing whether a point is inside a rotated box drawn with Quartz.
21/07/11 23:10
I’m revising Quartz because I need it for a Mac application I’m working on. I’m going to try if I can explain and illustrate a small thing I discovered. It involves a box, a rotation angle and the mouse.
I want to know if the user clicks inside this box.
This is easy. I just check if the NSPoint mouse is inside the NSRect box. There’s even a handy function for it called
if (NSPointInRect(mouse, box)) {
//it's in the BOX
}
Now I want to rotate that box like so:
How do I rotate it like that in Quartz? Well, the answer involves the part where you do the actual drawing and something called a
You get the current context like this:
Now in the current context there something called a graphics port. This according to Mac OSX Core Library is “the low-level, platform-specific graphics context” which means that it’s something that eventually represents the graphics hardware on your Mac. You get the graphics port like so:
Now, when I draw the box represented by
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.origin.x, box.origin.y);
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.size.width*0.5, box.size.height*0.5);
CGContextRotateCTM([[NSGraphicsContext currentContext] graphicsPort], angle);
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], -box.size.width*0.5, -box.size.height*0.5);
//do the drawing inside the box
What did I just do? First we have the
Let’s take a look what happens, I’ll go through these functions in reverse order. This is how everything starts out. The box’s lower left corner is at (0,0). In Quartz (0, 0) is at the lower left of the screen.
Everyone knows that to rotate a box successfully you have to put it’s origin, the center of the box, at (0, 0). This is what the first function does.
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], -box.size.width*0.5, -box.size.height*0.5);
Now the second function rotates the center of the box around the origin (0, 0):
CGContextRotateCTM([[NSGraphicsContext currentContext] graphicsPort], angle);
The third function undoes what we did in the beginning and puts the box to where it was.
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.size.width*0.5, box.size.height*0.5);
We have moved the box to where it was in the beginning and rotated it successfully!
Now the last function involves the translation of the box to the actual location where we want it to be (which is defined by the
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.origin.x, box.origin.y);
Voila! Now back to the original problem. I want to find out if the user clicked on the rotated box. We used the function
Why?
Because, nothing has changed. We still have the exact same
Question: So how do I use the angle to find out whether the mouse is inside the rotated box?
Answer: You rotate the mouse point as well.
Let’s say we have a situation like in the following picture:
The mouse is inside the box. We see that but to find that out in the program we rotate the box back to how it was and we rotate the mouse along with it. We already have the unrotated box, it’s the
The unrotation angle is equal to the negative amount that we rotated the box, that is,
Thinking a little bit ahead in the coding: After our unrotation-trick we can get the unrotated mouse coordinates, push them into an
There are many ways to transform points (more than I know). However, here I used a class called
NSAffineTransformation is an object so we have to initialize it:
NSAffineTransform *a=[[NSAffineTransform alloc]init];
To rotate the mouse point around the center of the box we have to imagine that we move the box to the center and rotate it back to where it was. We can create this transformation in three steps:
1. move the box to the origin:
[a translateXBy:-box.origin.x-box.size.width*0.5
yBy:-box.origin.y-box.size.height*0.5];
2. unrotate the box:
[a rotateByDegrees:-angle];
and 3. move the box back to where it was:
[a translateXBy:box.origin.x+box.size.width*0.5
yBy:box.origin.y+box.size.height*0.5];
One more thing: remember how the matrix stack works? It works backwards. So we have to call these functions backwards. So the code becomes:
[a translateXBy:box.origin.x+box.size.width*0.5
yBy:box.origin.y+box.size.height*0.5];
[a rotateByDegrees:-angle];
[a translateXBy:-box.origin.x-box.size.width*0.5
yBy:-box.origin.y-box.size.height*0.5];
And then, we apply the transform to the mouse pointer to get the unrotated new mouse pointer:
NSPoint newMouse;
newMouse=[a transformPoint:mouse];
And now we test:
if (NSPointInRect(newMouse, box)) {
//it's in the ROTATED BOX
}
- and that is it!
Well, I hope this has been helpful. Maybe someone read this and understood something new. I know I did.
I want to know if the user clicks inside this box.
This is easy. I just check if the NSPoint mouse is inside the NSRect box. There’s even a handy function for it called
NSPointInRect so you writeif (NSPointInRect(mouse, box)) {
//it's in the BOX
}
Now I want to rotate that box like so:
How do I rotate it like that in Quartz? Well, the answer involves the part where you do the actual drawing and something called a
currentContext which is a static parameter of NSGraphicsContext.You get the current context like this:
[NSGraphicsContext currentContext];Now in the current context there something called a graphics port. This according to Mac OSX Core Library is “the low-level, platform-specific graphics context” which means that it’s something that eventually represents the graphics hardware on your Mac. You get the graphics port like so:
[[NSGraphicsContext currentContext] graphicsPort];Now, when I draw the box represented by
NSRect box in Quartz and want to rotate it I do the following:CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.origin.x, box.origin.y);
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.size.width*0.5, box.size.height*0.5);
CGContextRotateCTM([[NSGraphicsContext currentContext] graphicsPort], angle);
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], -box.size.width*0.5, -box.size.height*0.5);
//do the drawing inside the box
What did I just do? First we have the
NSRect box and the angle which is a CGFloat. We call a function called CGContextTranslateCTM four times and in between we even call a function called CGContextRotateCTM. Now the trick here is to read these functions backwards! Why? Because that’s how the matrix stack works - just remember that.Let’s take a look what happens, I’ll go through these functions in reverse order. This is how everything starts out. The box’s lower left corner is at (0,0). In Quartz (0, 0) is at the lower left of the screen.
Everyone knows that to rotate a box successfully you have to put it’s origin, the center of the box, at (0, 0). This is what the first function does.
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], -box.size.width*0.5, -box.size.height*0.5);
Now the second function rotates the center of the box around the origin (0, 0):
CGContextRotateCTM([[NSGraphicsContext currentContext] graphicsPort], angle);
The third function undoes what we did in the beginning and puts the box to where it was.
CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.size.width*0.5, box.size.height*0.5);
We have moved the box to where it was in the beginning and rotated it successfully!
Now the last function involves the translation of the box to the actual location where we want it to be (which is defined by the
NSRect box).CGContextTranslateCTM([[NSGraphicsContext currentContext] graphicsPort], box.origin.x, box.origin.y);
Voila! Now back to the original problem. I want to find out if the user clicked on the rotated box. We used the function
NSPointInRect. Does it still work like before? No, it does not.Why?
Because, nothing has changed. We still have the exact same
NSRect box with the exact same values whether the box is rotated or not. We did the rotation on the graphics context before we drew and Quartz drew the box rotated. We told Quartz to draw the box rotated. Our data is the same only the angle parameter has changed.Question: So how do I use the angle to find out whether the mouse is inside the rotated box?
Answer: You rotate the mouse point as well.
Let’s say we have a situation like in the following picture:
The mouse is inside the box. We see that but to find that out in the program we rotate the box back to how it was and we rotate the mouse along with it. We already have the unrotated box, it’s the
NSRect box and the mouse we rotate like this:The unrotation angle is equal to the negative amount that we rotated the box, that is,
-angle.Thinking a little bit ahead in the coding: After our unrotation-trick we can get the unrotated mouse coordinates, push them into an
NSPoint and do the NSPointInRect test and succeed in our goals.There are many ways to transform points (more than I know). However, here I used a class called
NSAffineTransformation to get the job done. This class is also present in iOS. It’s used a lot with Core Animation to create menu and view transitions. So here we go, last lap:NSAffineTransformation is an object so we have to initialize it:
NSAffineTransform *a=[[NSAffineTransform alloc]init];
To rotate the mouse point around the center of the box we have to imagine that we move the box to the center and rotate it back to where it was. We can create this transformation in three steps:
1. move the box to the origin:
[a translateXBy:-box.origin.x-box.size.width*0.5
yBy:-box.origin.y-box.size.height*0.5];
2. unrotate the box:
[a rotateByDegrees:-angle];
and 3. move the box back to where it was:
[a translateXBy:box.origin.x+box.size.width*0.5
yBy:box.origin.y+box.size.height*0.5];
One more thing: remember how the matrix stack works? It works backwards. So we have to call these functions backwards. So the code becomes:
[a translateXBy:box.origin.x+box.size.width*0.5
yBy:box.origin.y+box.size.height*0.5];
[a rotateByDegrees:-angle];
[a translateXBy:-box.origin.x-box.size.width*0.5
yBy:-box.origin.y-box.size.height*0.5];
And then, we apply the transform to the mouse pointer to get the unrotated new mouse pointer:
NSPoint newMouse;
newMouse=[a transformPoint:mouse];
And now we test:
if (NSPointInRect(newMouse, box)) {
//it's in the ROTATED BOX
}
- and that is it!
Well, I hope this has been helpful. Maybe someone read this and understood something new. I know I did.
The Stateless Character
19/07/11 20:40
This is a pattern that I’m sure someone has already come up with somewhere. However, I thought I would share it nevertheless.
Let’s say you have a walking beetle animation which is an animation loop consisting of 30 frames. You see these frames rendered subsequently as the beetle walks.
Then the beetle has to stop and start doing stuff like stretching its legs. This is another animation loop of about 60 frames.
Then there are some 30 frames that are not a loop when the beetle opens its wings and is about to take off.
Finally, there’s a flying animation loop of about 15 frames as the beetle flies away.
I recently had to implement this. First, I thought that I will create an object called Beetle that has these four states: walking, resting, taking off and flying.
When rendering the character, I check which mode it is in and then render the current frame. When updating, I check the state and, depending on the current state figure out how to move the beetle, update the next frame and also update to the next state if necessary.
So I already had something on my hands that felt like it’s going to be a mess. I felt it’s going to be inefficient because I have to check the state of the character two times (for updating and for rendering) for every frame entering into a lot of logic and if-statements. But the hardest part of it was changing state. How the heck do I command these beetles to change state, when do I do that and where? Do I put in some sort of a command that the beetle has to check and obey? But when do I use these commands. Does the beetle start to have to command itself? (I think therefore I am.) Well, I thought about it for a day and decided to come up with something else.
A few years back I had the opportunity to work in a theater group as a sound guy, and even participate in a play as an accordionist. (We even went to Paris to perform.) There was a play where actors appear synchronously from behind a sheet. They had to train a lot to be in sync and to be able to be in the right posture when they appear. At times, one actor substituted another so that when everything was in sync it seemed like it was the same person but in a different mood. When it worked out really well there was applause. Remembering this gave me an idea!
What if there was no one beetle with a bunch of states? What if there were different Beetle objects for every one of these states, walking, resting, taking off and flying?
Now, when the state changes, like when the beetle starts resting, I just take out the walking beetle and put in a resting beetle. These beetles don’t have to train to be in sync because I will copy the position, angle, speed and acceleration values of the old beetle and set them on the new beetle for the next frame.
Furthermore, these beetles don’t have to understand anything about their state. They are just a walking beetle, resting beetle, a beetle opening it’s wings and a flying beetle (or in object oriented notation WalkingBeetle, RestingBeetle, BeetleOpeningItsWings and a FlyingBeetle). These objects don’t know anything about each other which simplifies not only the update part but also the rendering part. Awesome!
So I went ahead and did this and it worked out pretty well. I only had to take care of putting in a new beetle, taking out the old one and checking for any flags that said:”This beetle has to be replaced by another beetle”. For example, the beetle opening its wings isn’t a loop - so I check when it has arrived on the last frame I take it away and replace it by a flying beetle and let the flying beetle do its thing! Simple!
OK I admit some parts of the code became a little bit messed up in the main loop. But this is state code which always tends to get a little bit messed up anyway. Still, it actually went much more smoothly than I expected and this is definitely something I’m going to use in the future. Here’s a couple of diagrams to illustrate the concept. Observe how the state changes are really simple.
As I already mentioned I’m sure someone has already done this but maybe it didn’t have a name yet so there you go.
Let’s say you have a walking beetle animation which is an animation loop consisting of 30 frames. You see these frames rendered subsequently as the beetle walks.
Then the beetle has to stop and start doing stuff like stretching its legs. This is another animation loop of about 60 frames.
Then there are some 30 frames that are not a loop when the beetle opens its wings and is about to take off.
Finally, there’s a flying animation loop of about 15 frames as the beetle flies away.
I recently had to implement this. First, I thought that I will create an object called Beetle that has these four states: walking, resting, taking off and flying.
When rendering the character, I check which mode it is in and then render the current frame. When updating, I check the state and, depending on the current state figure out how to move the beetle, update the next frame and also update to the next state if necessary.
So I already had something on my hands that felt like it’s going to be a mess. I felt it’s going to be inefficient because I have to check the state of the character two times (for updating and for rendering) for every frame entering into a lot of logic and if-statements. But the hardest part of it was changing state. How the heck do I command these beetles to change state, when do I do that and where? Do I put in some sort of a command that the beetle has to check and obey? But when do I use these commands. Does the beetle start to have to command itself? (I think therefore I am.) Well, I thought about it for a day and decided to come up with something else.
A few years back I had the opportunity to work in a theater group as a sound guy, and even participate in a play as an accordionist. (We even went to Paris to perform.) There was a play where actors appear synchronously from behind a sheet. They had to train a lot to be in sync and to be able to be in the right posture when they appear. At times, one actor substituted another so that when everything was in sync it seemed like it was the same person but in a different mood. When it worked out really well there was applause. Remembering this gave me an idea!
What if there was no one beetle with a bunch of states? What if there were different Beetle objects for every one of these states, walking, resting, taking off and flying?
Now, when the state changes, like when the beetle starts resting, I just take out the walking beetle and put in a resting beetle. These beetles don’t have to train to be in sync because I will copy the position, angle, speed and acceleration values of the old beetle and set them on the new beetle for the next frame.
Furthermore, these beetles don’t have to understand anything about their state. They are just a walking beetle, resting beetle, a beetle opening it’s wings and a flying beetle (or in object oriented notation WalkingBeetle, RestingBeetle, BeetleOpeningItsWings and a FlyingBeetle). These objects don’t know anything about each other which simplifies not only the update part but also the rendering part. Awesome!
So I went ahead and did this and it worked out pretty well. I only had to take care of putting in a new beetle, taking out the old one and checking for any flags that said:”This beetle has to be replaced by another beetle”. For example, the beetle opening its wings isn’t a loop - so I check when it has arrived on the last frame I take it away and replace it by a flying beetle and let the flying beetle do its thing! Simple!
OK I admit some parts of the code became a little bit messed up in the main loop. But this is state code which always tends to get a little bit messed up anyway. Still, it actually went much more smoothly than I expected and this is definitely something I’m going to use in the future. Here’s a couple of diagrams to illustrate the concept. Observe how the state changes are really simple.
As I already mentioned I’m sure someone has already done this but maybe it didn’t have a name yet so there you go.
Dicetris mockups
18/07/11 11:18
Update on my uDevGames entry Dicetris. I have played around with the concept using the game field drawn on paper and with a die and some dominoes.
Creation of a basic sequence:
Level end monster:
Game over:
Controls:
Creation of a basic sequence:
Level end monster:
Game over:
Controls:
Transition paths in freelance computer programming
14/07/11 12:32
About three months ago, I was heavily involved in game development projects for the iPhone. However, last month it has mostly been for the iPad. Now I’m doing stuff for also the Mac but I have some iPhone and iPad projects starting later this year. The transition path from iOS to OSX has been pretty straightforward in terms of creating the core functionality of your application. However, the user interface is different and most multimedia and graphics APIs are also different. Also, there’s more freedom which requires you to make design choices.
For the Mac I’m currently programming a 2D Level Editor that will be useful in the future for platform games and top down or side scrolling arcade games. Currently, I’m using it with a program called Texture Packer that outputs sprite sheets in various formats. I’m making the integration better and in the future I will supply a free download version.
I’m also getting started on the game engine for Dicetris. Right now, I’m looking for the best way to port my iOS game engine to the OSX.
These are my current thoughts on transitioning: It’s a lot of work and for a freelance programmer it requires dedication, will and trust that you’re going get customers on the new platform and that they see you as someone who can get the job done. It also requires you to acknowledge that this is the era of the life long learner. Well, actually we have been there for a while already but still, you never know what will be around the corner. I’m loving the ride so far.
[As an aside, I come originally from MSX Basic (which I learned as a kid by watching my big brother program). Later, I did Pascal on the PC and then some assembly on the Amiga as a teenager. Then C and Java in University and at work. (I have also had to hack PHP and JavaScript - where I might get back to even this year.) However, three years ago, when I started freelance programming, I did a lot of ActionScript 3.0 because it seemed there were a lot of freelance projects in that area. ActionScript 3.0 was very easy to grasp after Java and it is a very cool language. Then I transitioned from ActionScript to Objective-C. By transitioning, I mean not only reimplementing my collection of code snippets to the new language but also adapting to the new platform and making it your own.]
For the Mac I’m currently programming a 2D Level Editor that will be useful in the future for platform games and top down or side scrolling arcade games. Currently, I’m using it with a program called Texture Packer that outputs sprite sheets in various formats. I’m making the integration better and in the future I will supply a free download version.
I’m also getting started on the game engine for Dicetris. Right now, I’m looking for the best way to port my iOS game engine to the OSX.
These are my current thoughts on transitioning: It’s a lot of work and for a freelance programmer it requires dedication, will and trust that you’re going get customers on the new platform and that they see you as someone who can get the job done. It also requires you to acknowledge that this is the era of the life long learner. Well, actually we have been there for a while already but still, you never know what will be around the corner. I’m loving the ride so far.
[As an aside, I come originally from MSX Basic (which I learned as a kid by watching my big brother program). Later, I did Pascal on the PC and then some assembly on the Amiga as a teenager. Then C and Java in University and at work. (I have also had to hack PHP and JavaScript - where I might get back to even this year.) However, three years ago, when I started freelance programming, I did a lot of ActionScript 3.0 because it seemed there were a lot of freelance projects in that area. ActionScript 3.0 was very easy to grasp after Java and it is a very cool language. Then I transitioned from ActionScript to Objective-C. By transitioning, I mean not only reimplementing my collection of code snippets to the new language but also adapting to the new platform and making it your own.]
Dicetris Mind Map and the road ahead
12/07/11 10:48
I’m attending uDevGames 2011 Mac game programming contest with a game called Dicetris. I will be blogging about the progress of this project here on the SoftCubicle blog.
I’m also posting on this thread about my game for the guys on the forum.
Here’s the project structure:
I’m also posting on this thread about my game for the guys on the forum.
Here’s the project structure: