Announcement

Collapse
No announcement yet.

Graphics Engine

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Graphics Engine

    I've had some time the past couple days to check out a few of the countless JS game/graphics libraries out there.

    Originally melonJS looked good, and I think it could work. but it has a lot of stuff specifically for other types of games and not much for what we'd be doing. craftyJS has an isometric engine built in, but it would be more limited in what we could do with it I think. The zooming doesn't seem to work very well in crafty.

    There are others, most of them seem to be catering to scrollers, RPGs, FPS, etc. The only game engine I've seen that looks really good for isometric maps is commercial.

    We probably are better off doing most of the game specific stuff ourselves and/or using specialized libraries for specific tasks. That way we don't have all the other stuff we'll never use in the project, and can have tools designed more specifically for the type of game we're building.

    One thing we almost certainly don't want to do ourselves is the graphics/display engine. Luckily there are some very good open source (MIT licence) options. Pixi.js looks to me the best option (though I haven't looked at everything). It uses OpenGL and has an automatic HTML5 canvas fall-back.

    http://www.pixijs.com/
    https://github.com/GoodBoyDigital/pixi.js

    Click image for larger version

Name:	2014-08-13, 21_31_32.jpg
Views:	1
Size:	233.3 KB
ID:	9135995

    http://apolyton.net/gamedev/pixi/iso/iso.html

    I've put together a small iso map demo by slightly modifying one of the tutorials on pixi's github. The original tutorial website is gone, but web.archive.org has it still, and github also has a copy of it and the assets:

    https://github.com/peepsquest/tutorials

    Used this to generate a quick height map with some custom threshholds for the massive 3 tile types.

    https://github.com/loktar00/Javascri...rain-Generator

    The tileset is from Kenney at opengameart.org

    http://kenney.nl/
    http://opengameart.org/users/kenney?page=2

    Nothing much going on right now. You can move the ball around using the arrow keys. No camera panning/zooming yet. The movement doesn't align yet to the iso layout. The heightmap is 256x256, and then building a 100x100 iso map out of that. (Most of it cut off by the 1200x600 viewport. We wouldn't be making that many tiles (10k) visible in most cases. Maybe when zoomed all the way out you'd get that many on a really big map. Right now they're all drawable, no culling yet. Ideally only those on the screen (and a small buffer) get drawn. But still pretty quick for generating 10k entities. It gets slow on my laptop when creating 256x256 or more tiles.

    I'm attaching a zipped folder containing all the files. It will run in Firefox without any issues. Chrome doesn't like getting JS files through the local file system, so you would have to run it with a special command or install a server Python or Apache both have servers that will work. I have Apache/MySQL/PHP installed through xampp. It's very simple to set up:

    https://www.apachefriends.org/

    What do you guys think? Pixi for graphics?
    Attached Files
    "tout comprendre, c'est tout pardonner"

  • #2
    Looks good to me.
    Do not take anything I say seriously. It's just the Internet. It's not real life.

    Comment


    • #3
      It's ALIVE!

      Fetal, but ALIVE! Excellent! And it looks good; incidentally, will the grid lines be a permanent thing, or something we can turn off, etc.? Sadly, between new kid and new job I've learned all of jack **** about JS in the past month (I know what vars are, that's about it), but lemme know if I can help. I might be able to do some HTML work, or pretty up documentation, or something?

      (thanks for the little PHP tool, btw; it's STILL saving my butt at work).
      1011 1100
      Read The Curse Of Life. Or click on the link to game Google or something if you're bored. Whatever.

      Comment


      • #4
        The grid lines are an artifact/feature of the tile images. With tiles that blend together they won't be there. (We'll have to implement an overlay that can be toggled for the gridlines.)

        I'll get a write-up about how to use pixi to get to that point.

        While looking for ways to implement a camera I ran into a game engine that uses pixi that looks very good. pandaJS might get us to "game building" soon. It has most everything we need I think, and some cools stuff we might want. Not much fluff.

        I'll try to get some of the basics in the next couple weeks. Stuff like loading a stat screen with graphing (I need to do a graphing project for work anyways). We'll need lots of different screens, so once the basic step-by-step process is laid out it would be a good way to learn how to do some things in JS.

        In the meantime, look at the iso.js file in a text editor. (Notepad++ is great.) You can figure out at least some of what is going on probably. Modify the viewport dimensions, open iso.html in Firefox ... add "worked on WebGL/HTML5 isometric tilemap engine" to the resume.
        "tout comprendre, c'est tout pardonner"

        Comment


        • #5
          Just got around to testing it--this morning's post was a quick jot before I went to work. It works pretty well, albeit it seems to generate mostly water maps. I'm guessing that's just a function of weights you assigned, etc. I notice that the ball's movement is not linked to the tiles beneath; would tile-linking be a more advanced project for later, or is unlinked movement desirable?

          Hard to say when I'll have free time again, though sometime next week I should finish up with the last of the inventory BS at work and finally start HTMLing. Everything's up in the air, anyway. But tinkering with the different screens does sound more my speed.

          Downloading Notepad++ now . . .
          1011 1100
          Read The Curse Of Life. Or click on the link to game Google or something if you're bored. Whatever.

          Comment


          • #6
            It's just a mock up to test the graphics package to help decide on what to use. Nothing there will actually be in the game. It's actually using a game engine (gf) I'm not familiar with, using pixi for graphics. I think we'll be using pandaJS which has different ways of doing thigns, but also uses pixi for graphics.

            The bland maps are because 3 tiles doesn't afford much variation, and showing only about 1/16th of the map doesn't help either. (Panning with mouse/keyboard, following the controlled unit, and zooming is what I wanted to test next.) The underlying height maps are much more interesting. Here's the demo of the heightmap generation being used. I chose it because it's something very similar to what the "teach yourself c/c++ game programming" books I played around with back in high school, so I didn't have to figure anything out again.

            I spent about 5 minutes on that part of it total. So definitely didn't expect much. The tile randomizer I first wrote and then commented out actually looks better in some ways.

            If you want to play with the threshholds, just modify the .5 and .3 to whatever (0 to 1 is the range):

            Code:
            			// get the terrain type of the current tile
            			tileType = terrain[row][col];//Math.floor(terrain[row][col] * 2);
            			if(tileType > .5)
            				tileType = 2;
            			else if(tileType > .3)
            				tileType = 1;
            			else
            				tileType = 0;
            Or comment out the call to generateTerrainMap(GEN_ROWS,1,8) and remove the comments around the preceding function and for loop to see plain random map generation.

            We'll have a much better fleshed out map generator later. One that allows custom map scripts ... square, diamond, and hex. Maybe some other types of non-tile maps later on.

            --------------

            The keyboard controls haven't been modified to work with the iso or snap to grid yet. It will definitely not be free movement like it is currently. Just takes a little work to code it. Should be able to get the iso "diagonals" working easily, it just means moving up/down 1/2 the distance as left and right. So change the -2 and 2 in moveUp and moveDown to -1 and 2:

            Code:
            function moveUp(e) {
              e.shiftKey ? moveAvatar(-2, -2) : moveAvatar(0, -2);
            }
            function moveDown(e) {
              e.shiftKey ? moveAvatar(2, 2) : moveAvatar(0, 2);
            }
            function moveLeft(e) {
              e.shiftKey ? moveAvatar(-2, 2) : moveAvatar(-2, 0);
            }
            function moveRight(e) {
              e.shiftKey ? moveAvatar(2, -2) : moveAvatar(2, 0);
            }
            The tutorial I built off of included that shiftKey stuff. If you aren't familiar with the syntax X ? Y : Z; it's just shorthand for if/else. If X is true, do Y, else do Z. So you could remove all that and just have moveAvatar(x,y); for each function. This will track diagonal (pressing up/down + left/right) correctly without the shift nonsense: (I applied this change to the demo on Apolyton, though you might have to clear iso.js from your browser cache to see the changed effects)

            Code:
            function moveUp(e) {
              moveAvatar(0, -1);
            }
            function moveDown(e) {
              moveAvatar(0, 1);
            }
            function moveLeft(e) {
              moveAvatar(-2, 0);
            }
            function moveRight(e) {
              moveAvatar(2, 0);
            }
            moveAvatar is a function from the gf library (lib/gf.js). What we end up using will be laid out and named differently, might function a bit differently too. But will basically be doing the same thing.
            "tout comprendre, c'est tout pardonner"

            Comment


            • #7
              The basic map generator will still use a height map. Then based on water level setting it will dynamically choose a height with X% of the tiles above water. Then we can use a particle engine to spin some "water" around in basic weather patterns, seeing where it lands to create a moisture map. From the height map, moisture map, and latitude (plus some fuzziness) then the tile type can be set.

              -------------------

              For the movement, with tile based games it should be snap to grid. Press once and the unit starts moving in a trajectory to the anchor point on the next tile. Though we can do some cool things with it, like have the unit track around obstacles (other sprites) on the tiles it's moving through ... or even have other units step aside to let them pass.

              The movement is done via a "tweener" which is basically just a way to move a sprite smoothly between two points. Here's how pandaJS does tweening.
              "tout comprendre, c'est tout pardonner"

              Comment


              • #8
                This seems fine to me, but I'd wait for someone more knowledgeable like Onodera to chip in. Will allowing different maptypes (like squares and hexes) make AI programming substantially more difficult? Or is it more of a "we have an AI that's acceptable for iso maps, you have the option of other types but then the AI is your baby" deal?
                1011 1100
                Read The Curse Of Life. Or click on the link to game Google or something if you're bored. Whatever.

                Comment


                • #9
                  There will be extra work involved.

                  I'd look at it as any allowance for variation. If you change a bunch of techs and units, the AI might still be able to play the game. But you'll likely need to change the AI to perform well under the new environment. Whenever someone is going to make significant changes that impact gameplay, they'll need to adjust the AI as well.

                  Something to shoot for. If it proves to be too much effort, we can just not do it of course.
                  "tout comprendre, c'est tout pardonner"

                  Comment


                  • #10
                    Of course. Do you happen to know of a good online resource for JS instruction? I don't know enough to really dive in, my local library has one 15-year-old book on JS, and Codecademy's JS tutorial kinda sucks.
                    1011 1100
                    Read The Curse Of Life. Or click on the link to game Google or something if you're bored. Whatever.

                    Comment


                    • #11
                      I'll try to make this a good resource for learning about js within the scope of what we'll be doing. I'm learning javascript myself, as I've only done some basic web design things with it in the past.

                      I've always learned by opening up someone else's code and hacking away at it. If using a code library, then reading their docs/examples is a good bet. Whenever I don't know how to do something, google "[language|library] [whatever I want to do]". Usually end up finding a good answer at StackExchange. Trying to learn a language completely ... is a long (not necessarily hard) job. Trying to learn how to do X in a language is a much more reasonable task to take on.

                      So for instance, to make the most basic pixiJS "game" (which isn't a game at all) I would just google "pixijs game tutorial".

                      http://www.pixijs.com/resources/ is the first result and it's best to start with the official docs. There http://www.goodboydigital.com/pixi-j...tting-started/ looks like the place to start. Grab the source files (link at end of page).

                      Let me know at what points it gets confusing and I can clarify it a bit better (and then know better how to comment the code I write so it's readable to you). I take it you understand the HTML, and some of the basics for javascript (variable, array, loop)?
                      "tout comprendre, c'est tout pardonner"

                      Comment


                      • #12
                        Originally posted by Elok View Post
                        This seems fine to me, but I'd wait for someone more knowledgeable like Onodera to chip in. Will allowing different maptypes (like squares and hexes) make AI programming substantially more difficult? Or is it more of a "we have an AI that's acceptable for iso maps, you have the option of other types but then the AI is your baby" deal?
                        No, it generally shouldn't if your AI is forced to use a generalized API that allows only queries like "give me the list of neighbor tiles" or "what is the shortest path between tile A and tile B". The only problematic thing might be the military tactics, where topology of the map is very important.
                        Graffiti in a public toilet
                        Do not require skill or wit
                        Among the **** we all are poets
                        Among the poets we are ****.

                        Comment


                        • #13
                          Yeah, I figured military would be the big sticking point. Currently digging through iso.js and figuring out what does what, with the help of my (scant) notes from my short time muddling through Codecademy's JS course. Also, thank God for Simple English Wikipedia. I gather an array is a sort of internal database of values of the same type, listed by a number. Presumptively this is used to define all the map tiles.
                          1011 1100
                          Read The Curse Of Life. Or click on the link to game Google or something if you're bored. Whatever.

                          Comment


                          • #14
                            Theoretically an array is a a sequence of values of identical types laid out sequentially in the memory. That's why they can be indexed by an integer. However, JS is so weakly typed I am not sure it is not implemented as a hashtable.
                            Graffiti in a public toilet
                            Do not require skill or wit
                            Among the **** we all are poets
                            Among the poets we are ****.

                            Comment


                            • #15
                              Okay. this is pretty sad, but I can't even figure out how to download pixi.js to use it with the Concentration game tutorial. I'm at their github, but the file actually labeled pixi.js is all of 178kb--is that really the whole thing?
                              1011 1100
                              Read The Curse Of Life. Or click on the link to game Google or something if you're bored. Whatever.

                              Comment

                              Working...
                              X