Why is my canvas image looking all scaled? (HTML5)

If you are doing some drawing with the canvas and you find your images getting scaled even if you swear you didn’t set the .scale property (JawsJS, EaselJS) then allow me to show you, my imaginary reader, the crazy magic that could be causing it.

Canvas and CSS

Canvas is just a place for you to put bitmap data. Its 2 attributes, height and width controls how many pixels the canvas contains. So this:

<canvas width="240" height="240"></canvas>

just initializes a 240×240 bitmap data. The canvas keeps that data and does whatever it wants with it. The rest of the DOM can’t do anything with that data.

CSS is where you tell the browser how the DOM should be rendered. Its primary purpose is laying out your DOM to make it look cool. So what happens if you set the css height and width of a canvas?

<canvas width="240" height="240"></canvas>

<canvas width="240" height="240" style="width: 480px; height: 480px"><canvas>

Here’s how CSS and Canvas negotiates their renderings: the CSS asks the canvas for the bitmap data so he can render it. The canvas shows her bitmap data. CSS turns the bitmap data into pixels based on the CSS rules he was given. “Hmm.. canvas says she has 240×240 bits of data, but my orders are to draw them in 480×480 pixels. This means 1 bit data is equal to 2×2 pixels. Cool, I’ll tell the browser about this.”

CSS tells the browser that he’s got all the layouts done and browser can now go and draw it on the screen. And that is why your canvas is all scaled and shit.

More boring explanation here

No Comments
by on February 12, 2012  •  Permalink
Posted in game programming, html5
Tagged , , ,
Posted by zerojuan on February 12, 2012

http://codeanginamo.com/blog/2012/02/why-is-my-canvas-image-looking-all-scaled-html5/

Action Reality

Recently, I played an unfinished arpg by Matthew Gartland. The game had no intricate backstory other than I asked him for a copy of the game instructions and I decided to give it a go after reading and re-reading it for a few weeks.

It was a rather playful experience, with instructions carefully balanced between light-hearted and ominous. It was short and took me less than 30 minutes. I could have finished quicker but I felt that the game wasn’t meant to be played like a race. It was more like a tour, as if I had an invisible tour guide pointing me to things I wouldn’t have looked at.

*SPOILER ALERT*

the game starts here

"you are moving against the flow of the water, which keeps you safe"

"Do not enter this building, it is very dangerous"

Contemplate the afterlife

"Go across."

In the end the game told me to find a safe spot to solve the final code phrase. I did it in a bus shed beside an American tourist couple. I was tempted to pass the game to them, if only I hadn’t written the solutions over the instructions.

1 Comment
by on January 2, 2012  •  Permalink
Posted in game
Tagged ,
Posted by zerojuan on January 2, 2012

http://codeanginamo.com/blog/2012/01/action-reality/

PGDF Awards (part 3)

Part 1 | Part 2

I was going to sweep the whole PGDF awards thing under the rug but this morning they emailed me that some of the judges and organizers reconsidered and now my game is in the right category. The game is now up against Jan Jan the Jeepney and Crazy Kite!!

Edutainmentastic!

Because it's not Filipino if you don't put a Filipino flag in it

I’ll be blunt and say that these games have as much “culture” in them as an Ibong Adarna coloring book.

I know it’s tough to make a game but as someone who believes in the creative potential in games I feel frustrated  when seeing games like this as the representative of our Filipino identity.

Citizens, let’s do our civic duty and vote To The Flowers of Heidelberg.

Also vote for the more awesome Circle Speedster.

No Comments
by on November 26, 2011  •  Permalink
Posted in game
Posted by zerojuan on November 26, 2011

http://codeanginamo.com/blog/2011/11/pgdf-awards-part-3/

PGDF Awards (part 2)

(part 1 here)

The application process could have been simpler. The nomination instructions were hidden in a subpage. I had to get birth certificates and stuff just to prove the games are authentic Filipino. Are we that distrustful as an industry that we’ll think someone is going to cheat here?

Last Wednesday, I received an email telling me that public voting is on and I should promote the game. And oh, public voting ends the following Wednesday. I checked the site and…

... the best PC/Mac game is in your browser's cache folder

The game, a browser, non-executable, installer-free flash game, is nominated for the Best PC/Mac game!  Ha, an awesome game is awesome, right?

Maybe the organizers “saw what I did there” and took me on my joke so I emailed asking them if it’s ok to nominate the game for the Cultural award instead. No sir, the voting and judging has begun so you can’t switch categories. What?! Wwwait, does it imply that no judging happened between the time I sent my application and the voting page was set up?

Oh well, at least Circle Speedster is there and, no offense to the other entries, it’s hands down the best game on that list. I was hoping to find something like Wildfire or at least some Indigo or Gonzo flash games. Either the organizers failed to advertise the event enough or the game developers couldn’t be bothered.

Seriously, play this first then vote the hell out of it.

Btw, you need to register to vote. It’s 2011, setting up Facebook Connect can be done in an afternoon. (But Julius, they’re game dev people not web developers.)

(part 3 here)

1 Comment
by on November 26, 2011  •  Permalink
Posted in game, game development
Tagged , ,
Posted by zerojuan on November 26, 2011

http://codeanginamo.com/blog/2011/11/pgdf-awards-part-2/

PGDF Awards (part 1)

Getting awards isn’t really a priority in all my game-makings. I’m not keen in joining sponsored/professional competitions. They tend to be serious and stressful and that level of competition just isn’t fun for me. Besides, the games I like to make and the games judges expect rarely exist in the same universe.

Sure, I dream of making a game worth entering in the IGF but only for the thrill of having my game played by the people I look up to and getting interesting feedback.

Back in college, my cousin and I decided to join a local film festival. It wasn’t big or anything, but it was a ‘celebration’ of Waray film making. (Yes, apparently Waray film making exists). Knowing the most likely entrants, the Liberal Arts /Humanities folks, we expected a bunch of serious, artsy “socially relevant” videos with sad piano scoring. We hate that kind of films. I’m Waray, and that’s not the kind of movie that represents me. Something has to be done! So with a digicam, a ski-mask, and a basic premise, we went around the campus one afternoon and made our own art film. The artsy stuff still won the competition but we had the entire audience laughing. Except for some minor grammar corrections, our awesome poet+professor congratulated us on our “intelligent comedy”. This was a big deal because he’s a guy who can weave multiple layers of humor into a poem IN WARAY-WARAY.

4 years later, I have given up on my plans on winning a Cannes and turned to making bidyogeyms instead. A month ago, I saw this:

Is this legit?

It sounded like a cool idea. But somehow it reminded me of that film festival. Is this a sincere celebration of whatever video game making progress we made as Filipinos? Or is this another attempt at self-validation by the game companies? Is this legit enough to bother joining?

Who are the likely entrants?

The Philippine game industry is small and most of them are into outsourcing, so fewer still are companies with original IPs.  Having only one or two companies join and getting awarded because they have a different business model isn’t exactly the purpose of this event… is it? But wait, mobile has been a buzzword this year and developing in it is relatively accessible maybe there are a bunch of low key game devs who made something awesome recently. There are also browser games. There’s at least the possibility of diversity.

What’s the judging process?

Again, small industry so I have a fair idea of who the jury might be composed of. I’m not a big fan of judging by criteria just as I don’t like game reviews that score audio, graphics, gameplay separately. The criteria might serve as a guide and won’t be strictly followed I suppose.

It says in the application form that I can only choose to nominate a game at most 3 categories. Maybe they are expecting a lot of entries, to make it easier for the judges? But shouldn’t categorizing the entrees be part of the judging process? People who want to award video games should know enough to see which category applies to what game, shouldn’t they?

What are the award categories?

Third, I checked the categories and the first bullet point LOLd me: “Cultural Award”.

Making games about Filipino culture, just like making ‘educational’ games, is a touchy subject for me. Games that are designed for this purpose are usually horrible, immature perversions. They are less about culture and educating than they are about asking for societal validation. “Look Ma, you say games are a waste of time. I made a game with maths and also tell you what our national flower is.” The situation was similar to the film festival.

Something has to be done!

I’ll enter a game, a “local culture” game. I’ll nominate it for an unrelated category and see if the organizers care.

Nominating for Best Mobile Game would be too easy. The description hints at it being about culture.

I will also nominate a super awesome totally indie game and see how it fares against the IPs of the game companies.

"Indie spirits" sounds like an awesome publishing company. They also sell liquor.

(part 2 here)

3 Comments
by on November 26, 2011  •  Permalink
Posted in game, game development
Tagged , ,
Posted by zerojuan on November 26, 2011

http://codeanginamo.com/blog/2011/11/pgdf-award-part-1/

From Flash to Atari 2600

For more almost 2 months now, I’ve been trying to learn making games on this:

Fun fact: I have never played on the actual machine

Why (normal answer)?

I didn’t have real assembly programming experience so I have no idea how hard the ‘good old days’ actually were. (Blame my college instructor who only met us thrice, gave us passing grades and disappeared).

I want to make a video game under serious constraints as a tribute to the pioneers of the medium (see A Slow Year, Halo 2600).

Most of my games are made in Flash and even if I worked for the industry I still get weird looks when I introduce myself as game developer. “Flash? Real game developers use C++.. nay, REAL developers use assembly!”

Why (artistic/pretentious babble)?

Most of my video game stuff is a cultural commentary. My imaginary critics may claim that my games are commentary first before game, that they would be more fun if I lose all my baggage. They’d be imaginarily right, except I’m not really interested in making the next Angry Birds. The continued interest that I have for game dev, despite my bad experience professionally working in it, stems from my frustration from developers trying to make a Filipino video game. Anito was awesome and all but why did we stop there, you guys? (There are a lot of factors inhibiting us from expressing our culture genuinely. I hope I’m able to address them in this other game I’m working on.)

Also, sometime last September, I was able to play this:

You might need a translator to play Spanish games

Prior to playing them, I had no idea Spanish video game culture was THIS old. Then again, my knowledge of European video game history is very limited.

The design and narratives of the old games reflected the culture of their creators. They might have been trying to compete with the global market, but they worked with a very Spanish taste. Game creation then didn’t have the rigid commercial rules we have now and in effect forced their creators be very personal in their approach. This ‘authenticity’ is what I find most interesting.

Wouldn’t it be cool to see how in the middle of Martial Law and the EDSA revolution and the aswangs and manananggal some guy rage quit his Pong game and decided to make his own? How will Marcos and Communism and Eat Bulaga play into the creation of 4kb worth of digital entertainment?

Making a game in one of the earliest gaming platforms now won’t change how history was written, but I want to see how a Filipino programmer in the 80’s would have made his own video game.

1 Comment
by on November 16, 2011  •  Permalink
Posted in game, game development
Tagged , ,
Posted by zerojuan on November 16, 2011

http://codeanginamo.com/blog/2011/11/from-flash-to-atari-2600/

Flowers for Jose Rizal

Last May, I maybe started this game collective. There are a lot of reasons why I did that but they’re fit for another post. Now, a game collective isn’t one if we don’t at least make games for ourselves. So we did just that.

We were supposed to make a game about Jose Rizal to celebrate his 150th birth anniversary. I made a sorta game about his poem To The Flowers of Heidelberg.

It's a art

I have never read Rizal’s novels beyond what was required in school, though I like his poems. Rizal originally wrote in Spanish and experts say we miss a lot of his wordplay by reading it in translated English. But I trust Nick Joaquin’s work and his version of the poem.

When I was a kid, the poem used to be about patriotic nostalgia, but now that  I’m roughly at the same stage as Rizal when he wrote this its meaning got a little personal for me. This was written in the middle of Rizal’s intellectual growth in line with pursuing his passion. He and his “illustrado” friends are travelling in Europe, picking silly fights, fencing and modelling for paintings, along the way discovering the concepts of nationhood and freedom. 10 years later, he will be martyred for inspiring a revolution and attacking the Catholic church, his friends will die or be killed in the uprising, and his country will be sold to the Americans. In ten years, shit got totally real!

It would be cool to think that what I’m doing would be part of some revolution in the next decade and I hope no one gets killed (figuratively of course) because of it.

Play Flowers of Heidelberg

Technical Notes

I tried to remove non-essential elements of gameplay knowing that it would only diminish the overall impact of the game. My goal wasn’t to make something addictive, though I could have tried that it wouldn’t feel right knowing the subject matter. I believe some games should only be played once and its abusive for games to force players to play far longer than they have to.

Thanks to the notgames community for the insights about the game.

 

[Sorry, the two people who read this blog, for my radio silence this past few weeks. I've been busy working on paid stuff, that I can't actually show here. Anyway, I'll post project updates soon.]

No Comments
by on July 1, 2011  •  Permalink
Posted in game, Uncategorized
Tagged , , ,
Posted by zerojuan on July 1, 2011

http://codeanginamo.com/blog/2011/07/flowers-for-jose-rizal/

How to make an “educational” Math game

Dudes, I am not an educator. I taught some classes, yes, but I don’t have formal education on educating. I don’t claim to be an expert on teaching kids.

But I am, to a certain extent, a gamer. But nope, I’m not hardcore. Just a gamer.

My Personal Sad Story

Here’s my personal sad story:

I grew up in a house without a single videogame console. We have shops in the neighborhood where you can play playstation games at 20pesos/hr. My allowance can only let me play a few times per month. I played Mortal Kombat II with friends. The nearest coin op arcade is 4 hours away. And even if it existed next door, I don’t think I could have afforded that either.

My parents think those kind of games are bad for kids and so they kept us away from it. They however bought us a PC. See, they agree that not all games are bad. Games that run on the PC are good. For starters, it taught me how to use the computer (the tool of the futuuure!). I became comfortable in the command line, MS-DOS era. As for the actual games, the games my parents let us play on the PC really were educational.

They bought us two kinds of games. The ones that were meant to be educational, (“Let’s Learn Math”, “Spelling Bee” stuff) vs the regular pc games. Guess which ones I played more and made more impact on my learning.

I played action games, I learn spatial thinking. I played Lucas Arts adventure games, I learned how to read and understand context. I played Civ, I learn about the forms of government long before we discuss it in class.

With the help of emulators I was able to play console games and realize that my parents were wrong on the educational games are exclusively for the PC part. The rest, they were spot on.

Still, I don't know what these are. :(

Presenting: Educational Games

Fast forward to the present and I read crap like this: Numvaders Press Release

Problem: Filipinos (and implied, the world) think that games are too addictive and this is a bad thing.

Solution: Make a game that is still addictive, but this time makes you learn how to do basic math. A good thing.

Simple counter-argument: Why break a great game like Space Invaders so you can shove your stupid arithmetic homework into an iPhone owning kid?

Follow up counter-argument: Who plays this kind of games?

It’s not only Numvaders. I have seen a lot of these games, coming mostly from the Philippine academia, claiming to be all about edumacating. They seem to think that any software with cartoony graphics is a video game. They have the shallow notion that a kid is more likely to solve a math problem if it is in comic sans and the background is a picture of Disneyland. Yes, this kind of approach to teaching works Sesame Street style but that’s not using the real power of video games and doesn’t contribute anything to the gaming image.

How to make an educational Math game

But how, you ask, will I make a game about Math?

Dudes, let’s take a Space Invaders style game. Let’s say we want kids to know about the four basic arithmetic operations. Most of the arithmetic is already there. You have killing aliens = subtraction. You accumulate points = addition. You have combo multipliers = multiplication. Umm, you can implement division by having special gameplay mechanics, for example, 1/3 of the invaders attack at a time. The whole time the player is blasting aliens, his maths is working. Somewhere between levels the player is thinking: ”If the hiscore is 2850pts and I’m at 2400pts how many more level 1 invader should I shoot if a level 1 invader is 50pts a piece?”

Math is represented everywhere in games, you don’t have to try very hard.

 

Pictured: Math teaching tool

You can make it slightly didactic by adding quests like “Get 5 shots on invaders worth 250pts”. The trick is don’t make the player feel like he/she is doing homework.

Conclusion

Stop making games look bad by trying to make it look good. Also, stop trying to get rich on video games, because then you’ll be doing it wrong.

1 Comment
by on June 3, 2011  •  Permalink
Posted in game, game development
Posted by zerojuan on June 3, 2011

http://codeanginamo.com/blog/2011/06/how-to-make-an-educational-math-game/

Open and Free

UI draft: Pretentious Art Deco Style

Yessir, I spawned yet another open-source hobby project. Here are the codes:

https://github.com/zerojuan/ForgeStory-Server

https://github.com/zerojuan/ForgeStory-Client

In terms of technology and innovation, this project is nothing special. There are a lot of other games like it, the concept isn’t new. I try to keep the code as easy to maintain as possible but that’s the norm. So why am I doing this? Well, why not?

I Have Nothing to Lose

Once I met a team of student developers who made an award winning game. I asked them about the future of the game, whether they want to share the codes or not, and they said, citing commercial and business reasons, no.

Are you planning to sell the game? Nope, it’s available to play on my website.

Am you using proprietary algorithms as the secret sauce on your business plan to world domination (ala Google)? Nope.

Is there something in your code that will directly lead to you losing anything? Umm, someone could use it to make a game exactly like mine and then pass it off as their own… Aaand? Can they steal design instincts? Or marketing? Do they have all the other skills you (or your team) have that made the game successful? Nope.

Then why aren’t your sharing your code?

The Philippines isn’t exactly a hotbed of game development right now. It’s a country where formal game education and training isn’t a big priority and we are only restricting ourselves by being selfish to one another.

And Have Stuff to Gain

As far as I know, the challenges in making persistent web games isn’t very documented. Trying to learn this stuff from scratch isn’t an enjoyable experience and most people are put off by it. I always believed that the web is the future of gaming and the more accessible we make it the easier that transition will be. By putting this very standard project in front of everybody I hope I’m inspiring more developers to try this social web gaming thing.

When you are open, other people tend to be open too. I’m not the best programmer. I only have a year of “professional game development experience”. There are a lot of things I don’t know. By making this opensource, I subject myself to other developer’s scrutiny. I’m hoping someone would declare my code crap then proceed to tell me why. Worst will be if no one cares about this project.

And as my hidden agenda: having a github account makes it easy for employers to evaluate my work. And people who interview me without bothering to check for my online projects, while not exactly a deal-breaker, is a bad sign.

Conclusion

Filipino game developers should really try sharing their magic tricks. No one will benefit from a community who keeps secrets from one another.

I know that there is a lot more to this open source thing than just pushing to a public code repository, but it’s a start.

No Comments
by on May 31, 2011  •  Permalink
Posted in game, game development, social games
Posted by zerojuan on May 31, 2011

http://codeanginamo.com/blog/2011/05/open-and-free/

Forge Story, The Next Chapter

As promised, I am going to start updating Forge Story once the LD judging is over.

I was supposed to keep working on it on a local server the weeks prior, but I keep getting sidetracked with personal (read: unemployment) issues. And I’m afraid I’ll be sidetracked even more as my not-receiving-a-salary status worsens.

 

How I went from being promoted one day to resignation 2 months later is a story for another time

I almost considered giving up on this project if it weren’t for 1) the peer reviews the game got on LD and 2) the cool user generated art that piled up in my server.

Why Make A Game ON Facebook?

While the finished game is, to put it kindly, raw for game standards, the comments and the low play rate it received seems to suggest that the majority of  indie developers doesn’t like the idea of social network games.

Challenge, accepted! I am going to work on this game some more using garage indie resources and methods and prove to the community that the social network platform is perfectly workable and is a very exciting place to work on. I have decided to keep the development of the game  as open as possible with hopes that others can learn or get inspired by it. Seeing that I am already planning on making this guide.

User Generated Joy

Most of my past efforts consisted of me making games for myself. And Forge Story would have been the same if it weren’t for this:

Pixel art from my social network

People, mostly my friends, are using the game to create awesome stuff. This never happened before! Wonder what it would be like if I let them animate their creations or turn them into quest items or pokemons. This is the question that keeps me awake at night  and I can’t let my codes rot any longer!!

What will become of Forge Story?

It will be opensource and all possible aspects of its development will be public. This means features and roadmaps will be shared. The game is also being built on top of RPGAutomata (for the battle and animation system) so RPGAutomata will still be active as well.

And of course, there’s an ulterior motive: making a Facebook game will at least keep me relevant while I’m looking for my next job.

 

 

 

By making this post public, I am making myself accountable for making this game so played it will crash my webhost.

Like the app page here

 

1 Comment
by on May 26, 2011  •  Permalink
Posted in game development, social games
Posted by zerojuan on May 26, 2011

http://codeanginamo.com/blog/2011/05/forge-story-the-next-chapter/

« Older Posts