1. virtual pet mascot

    Virtual Pets

    Welcome to the Virtual Pet list forum!
    We're a virtual pets and sim games community and the largest forum in our industry. Game owners can use our forum to their advatange by promoting/advertising their games to our users and receive feedback/reviews from those members that try their games out. We support developers of all kinds from RPG developers, sim game developers to virtual pet site developers. We want to see more games in our industry come across more success and that's why we try our best to release as many guides/articles regarding online gaming development as we can.
    We're unlike other forums in our industry because we try our best to be there for our users no matter what and give them advice whenever they ask for it. Running an online game isn't an easy task, but with our many resources that we've built since 2011, you'll learn a lot from our online community. Please don't ever be afraid to ask a question on the forums because if you never ask, then you'll never receive an answer to your question and you can only improve by asking other users for help/advice.
    We have a lot of virtual pet sites' owners and sim game owners that are very frequent visitors on our online community. Along with artists, writers and programmers that come here looking for work and games to work for. Our members who are artists sell art in our art marketplace and programmers are allowed to sell their scripts in the programming marketplace. We also allow game owners to sell their game in our general marketplace
    In early 2011, we decided to make a comeback to the internet because in 2010, we had a minor setback and we had to re-launch without any content, but with a lot of time, patience, hardwork and effort, we've managed to rebuild the Virtual pet list community into something better than it was before. We actually registered our domain name on November 4th, 2004, but we were only a directory then and all we had was a basic comments system for users to post things on their favorite games..
    So, what are you waiting for, why don't you join today? If you have any problems figuring out our security code, then here's a hint, it has millions upon users and has been around since 1997.
    Our list of virtual pet sites and directory of sim games have a lot of different games listed, so we're pretty sure that you may find some games that suits your needs as a player of sim games or virtual pet sites.
    If you're still curious about a certain game that you'd like to play, then please check out some of our game reviews that were written by some of our great contributors and our interviews with respective virtual pet site owners, sim game owners, artists, writers and programmers that have worked in this industry.

  2. Check out our latest guide on how to grow your user base!
    Paladore - Boopets - Icepets - Corepets open beta
    Virtual Pet Directory
    Are you looking for new virtual pet sites or sim games to play?

Canvas Cycling in HTML5?

Discussion in 'Programming General' started by CometTheMicroraptor, Jun 30, 2012.

  1. CometTheMicroraptor
    Offline

    CometTheMicroraptor Approved Artist Approved Artist VPL Member

    Reputations:
    2
    Joined:
    Mar 22, 2011
    Messages:
    363
    Likes Received:
    55
    Trophy Points:
    38
    Location:
    Liaoning Province, China. est. 126 mya
    Okay, so I'm curious about something, and this is entirely for future reference, so don't get too excited just yet. I also apologize if I'm not articulating myself very well, since I know very little about how this works.

    Now, I happened upon this site a while ago now, and it remains to be something that absolutely stuns and baffles me every time I look at it.
    The artist says that he and another programmer used HTML5 to make these images, which are like traditional canvas cycling pixelled images seen in older games.

    This is the site in question: http://www.effectgames.com/demos/canvascycle/
    I highly recommend going through it to see what I'm trying to describe here. Basically, though, they are images (with pleasant accompanying sounds, I might add) that have certain pixels cycling in color to create animations (most of which you see is precipitation and moving water).

    Now, out of curiosity... is anybody on here able to do that? I've mentioned before that a friend of mine and myself want to open a site that is slowly turning into something exclusively pixel based and we'd love to have our maps be like this. However, we'd love to have different weather patterns and light cycles happening on them as well (not that these would cycle but I think you get what I mean), and I'd love to know how it works or if anybody can help me do this so that I don't have to make the animations myself, as that is incredibly complicated. It just seems incredibly fascinating.
     
  2. indysolo621
    Offline

    indysolo621 Member VPL Member

    Reputations:
    0
    Joined:
    Feb 27, 2011
    Messages:
    1,397
    Likes Received:
    59
    Trophy Points:
    48
    I'm trying to wrap my head around how they are doing this. I assumed that this was done simply with images, and just cycling through them on the canvas to create the animation. But the way you described it sounds a little bit more complicated. Do you have a link to them describing this method?
     
  3. CometTheMicroraptor
    Offline

    CometTheMicroraptor Approved Artist Approved Artist VPL Member

    Reputations:
    2
    Joined:
    Mar 22, 2011
    Messages:
    363
    Likes Received:
    55
    Trophy Points:
    38
    Location:
    Liaoning Province, China. est. 126 mya
  4. Dart
    Offline

    Dart JRPG Fanatic VPL Supporter VPL Member

    Reputations:
    0
    Joined:
    Jan 23, 2011
    Messages:
    1,028
    Likes Received:
    102
    Trophy Points:
    63
    Gender:
    Male
    A better way is array operations on imagedata objects. I'm working on an example.
     
  5. Dart
    Offline

    Dart JRPG Fanatic VPL Supporter VPL Member

    Reputations:
    0
    Joined:
    Jan 23, 2011
    Messages:
    1,028
    Likes Received:
    102
    Trophy Points:
    63
    Gender:
    Male
    The following example uses imagedata manipulation:

    http://www.brawnpower.com/img/test.html

    Programming this demo reinforced my preference of flash over HTML5 (CanvasPixelArray doesn't support the regular Array methods, meaning I had to use for loops to set each pixel value individually, adding extra code and time)

    On the bright side, it's still more flexible than using images (suppose, for example, that you wanted to slow down the animation. With this method, you can simply change a single number) :)
     
  6. Lewis
    Offline

    Lewis Corepets owner VPL Staff Pet Game Owner VPL Supporter

    Reputations:
    139
    Joined:
    Jan 21, 2011
    Messages:
    1,875
    Likes Received:
    191
    Trophy Points:
    63
    Gender:
    Male
    Location:
    UK
    It's done by using one image and changing the colours of the palette and blending them with the original colour. If you click "Show Options »" you can see the colours changing.

    How does that compare to this?
     
  7. Dart
    Offline

    Dart JRPG Fanatic VPL Supporter VPL Member

    Reputations:
    0
    Joined:
    Jan 23, 2011
    Messages:
    1,028
    Likes Received:
    102
    Trophy Points:
    63
    Gender:
    Male
    And how do you think they show / change the colors?

    Basically you use a loop to check each set of four values (the data of each pixel) to see if it matches the target color, and if it does you set the values to 255, 255, 255, 0.

    ------

    That being said, I will concede that they were actually using images for the animation.
     
    Last edited: Jul 1, 2012
  8. Hituro
    Offline

    Hituro Approved Game Owner Pet Game Owner VPL Supporter VPL Member

    Reputations:
    17
    Joined:
    Feb 1, 2011
    Messages:
    1,416
    Likes Received:
    97
    Trophy Points:
    48
    On an 8-bit animation system you achieved these effects by directly manipulating the color palette used to draw an image. This provided very fast color cycling animations, where waves of color moved across an image. I used to have a screensaver that acted just like that. By changing only part of the palette you could make only part of the image animate.

    In the JS implementation you can't change the actual color palette, so the author makes an object representing the palette, with cycles defined for each color, and then updates the canvas image as the colors change. For speed he redraws only the individual pixels whose colors have changed. He doesn't ever test the pixel's current color, just changes the palette.
     

Share This Page