Mysgardia
 

Hi guys!

Okay, so, Mysgardia will be my official actual site. :P The Garden was pretty much a little tester site for me. It's going to stay up until I switch to Mysidia v1.4. After that there will just be Mysgardia! I've purchased the domain mysgardia.com. I may or may not put up a landing page in the meantime.

Anywho, while I'm waiting for 1.4 to come out, I figured I may as well start getting the logo, graphics, etc together to have it all ready. I'll post anything I get finished here. If you guys have any advice, tips, or pointers for my art (or whatever I post) please do comment!

Today I worked on the logo. Here it is:

http://i.imgur.com/1d6P3vl.png
http://fc01.deviantart.net/fs70/f/20...at-d7aolw1.png

The idea for the logo was to have kind of like a simple Celtic sort of text. I used the text Cardinal Alt. For the logo icon I also wanted something to represent magic and a portal aspect. Hopefully I got that okay. (:

I'm not sure what color scheme to use for the logo. I was thinking purple to represent magic and green to represent the "garden" or nature part of it. Hmm...

Next up I'll be posting a mockup of what I'd like the site to eventually look like! For starters I'd like eggs to display on some sort of landscape background, right on the homepage of the site. I'll need some awesome coders to do that most likely. ^^ Check back for the mockup soon!

I've done the site's first mockup!

http://fc01.deviantart.net/fs71/f/20...at-d7ap768.png

Oh it looks really great so far, and nice name you get for your site. ^^

Thanks Hof! <3 one of the members here (squiggler I think?) suggested the name. I think it's a great homage to the Mysidia script too! :smile:

I'll probably post more mockups soon of other site pages like the profile view, adoptables page, etc! (:

Nice! The layout's looking beautiful so far. You're presenting stuff in such a way that it looks like it's been taped in place.

I'd love to see some lightweight images added, make the tape more realistic maybe, perhaps even given the announcements the illusion of being on paper. But to make the announcements, which could be a variety of lengths, hold the illusion of being on paper would come with it's own set of difficulties. (Corner textures, repeating side textures...) It might look good, but it might also be a fruitless effort. If it were my site, I might attempt it when I had time... and I still might decide I didn't like it. Best of luck, if that's the route you already had in mind.

Thanks Kyttias!

I was actually thinking about putting many more textures and such in that area. Instead of the light grey background it could have a wooden desk texture. The large news post would have a newspaper texture and font, and the sections on the side could have notebook paper textures or sticky note textures.

Or the grey bg could be like a post it board texture even with a "frame" at the top and bottom. And instead of tape there'd be pins. Gosh I don't know! I think I like this idea better. (:

Thanks for the feedback! I'll probably post more mockups so I'd love feedback on those as well when they're up. ^^

I think the layout is fine as it is. Tweak things as you go, but don't add too many images.
It will run slower on mobile devices, and slower computers.

Simple is always best when it comes to design. You don't want it to be too busy where users don't know what they're doing or where to go next (That's my current problem with the neopets site. Too much going on all at once. It's overwhelming@.@)

Thanks Miki, I forgot all about that! I'll try to limit the amount of images I use on the site.

I also don't like cluttered sites. My style is more clean, simple, and flat most of the time. I'll see what I can do to make the site visually appealing but good with load times as well.

Thanks! <3

Mmmmm the ancient 'don't use images' rule is from the archaic days of dial-up. Chances are even people's smartphones could handle images that measure up to be (excuse the potential pun) byte-size. While I definitely want to encourage us all here to push towards mobile-ready websites, it is possible to set images to only load on screen widths higher than a certain amount with only a bit of css (check out this article on media queries). That said? We're building sites centered around adoptables. Images. Sometimes large, colorful, animated, or transparent images. Heaven forbid all at once, but... you get the idea. We're, by our very nature, an image-heavy existence.

If you're already going to have icecream, what's some chocolate drizzled on top really going to do? In fact, if you walk into a restaurant and ordered icecream for dessert, you might even expect that kind of service, whip cream and a cherry, too. Your visitors are already at your door - dazzle them! But with class and finesse, of course. Less is still sometimes more, but as they say about food... people will always attempt to eat a dish that looks well prepared, even if one that isn't beautifully plated actually tastes better. Just make sure your layout/template asset images are nice and compressed, and the use of images sparingly won't hurt.

As another unique tip on top of queries for the size of the device, you could also use a sprite sheet, sliced up nicely with pure css, so only one image has to load. If you're worried about the ping time that multiple small images could take, just make one big sheet and read up on the technique, or use a helpful tool (like this one). Seriously, it's worth looking into! Then all you're doing is positioning a div (or other page element, like a span, or some have suggested to even use italic tags with nothing inside - they think they're being cute, now the i tag sort of stands for icon *laugh*), and equipping it with a class name that will pull the exact image from the exact x and y coordinates located on the sheet with, at the exact height and width it's meant to be in.

If you really want to go for the flatter, fast food frozen yogurt in a simple cone look, because there's nothing wrong with giving people just what they need, just make sure it carries over well to every element of your site. Use few colors, simple and precise wording, and try to create the best environment that showcases an atmosphere your adoptables take the focus in. Flat is good. Flat is in. But any plot line or environments to wander in may start to feel more like bulky flavor text, rather than something equally important, so I worry about over-simplifying things while attempting to carry a flatter design over the entire site in a broad, matching sweep.

The best site is probably a hybrid. Neither too flat nor too glamorous, even and well spread. The taste of luxury casino food, the affordability of fast food, but the welcoming friendliness of the local corner diner. Design and food, definitely great comparisons.

Inevitably, I really do trust your judgement! What you have so far is great! <3

Kyttias, are you a blogger or article writer?
Because you should be if not, seriously! If you have a blog you should totally give me the link. I love your writing! <3

Haha, but anyways. I have been mulling it over in my head a lot. Basically what I want is a site that isn't cluttered like so many others. Easy to navigate, find links, find information, etc. BUT, I also know adoptable (and any game, really) sites really do need lots of pretty graphics and images so they're not boring (you already covered this). My end goal is to have something very balanced.

I may do a few more different mockups I had in mind and post them here for you guys to review. I would be very grateful. <3 With the homepage, I'm not sure whether I want more information about the site displayed there or not. Is the news & feature creature section really necessary considering that same information will be displayed on the News page? I don't think so. :P

I think what would be better is to display a small list of popular features the site has, to show visitors and potential members what the site offers. Anyways, I'll probably make some more mockups like I said. It's better to have many options to choose from!

I'm not, currently! I'm highly considering it. I do post links to cool web design/development resources on my twitter, tumblr and google+ pages (all not too hard to find with a quick google search, same user name as here!) . . . but I don't write articles just yet. I'm pretty verbose when it comes discussing things I'm passionate about, and I love being helpful.

Also, hmmm... news articles. For returning users, they might like a quick glance at the news the moment they show up at the site -- but new visitors aren't so interested, I agree. I think this could easily be solved be redirecting users at log in straight to the news page. (By default Mysidia redirects to a list of account management features, but... I personally don't like that. In fact, it might be nice to roll the account management list into a widget beside the news, but also making sure that users visiting the news page won't see that widget when they're not logged in.)

That's a great idea! I'll do that! :D I too was thinking of putting a little account widget somewhere, just so that members can easily see if they have a new PM and access their basic stats. Eventually I'd really like there to be user experience and levels which can display in the sidebar widget.

But yea seriously, if you ever start up a blog or something let me know, haha. <3

Second mockup. Not sure which one I like more. :<
http://fc09.deviantart.net/fs71/f/20...at-d7b9rlw.jpg

Oh the site looks gorgeous. ^^ You are great at designing site template, no question about it. Perhaps you may consider making a few skins/themes for the script? Its your choice though.

I was actually thinking about it once I get more familiar with the script. (: if I manage to get one of these layouts installed easily I'll definitely make some free ones for users! c:

Here's the redone brown Flower Cat and a new siamese Flower Cat. c:
http://i.imgur.com/Qe2g3SG.png

Hmm...the second one- if the black part can collapse, you'd probably want to do that. With the recent emphasis on smaller screens, computers aren't as wide as they used to be.
I think a good compromise is what UC does. It has a thin sidebar with space on both sides to compensate for smaller screens. (Note: The sidebar is about 2/3x as long if you're logged in.)

This might help on making the sidebar work well on smaller screens (even phones): http://liveweave.com/KmNVd7 I tried to simplify the code as much as possible. Check out what it does at different widths! At anything above a certain size, the menu toggle won't appear at all. At smaller widths, the menu can be collapsed with it. How you manage your space vertically within the sidebar is up to you.

With that in mind, it'd be easy to change the height of any header you included to be shorter on mobile devices. I've colored the space for the header and wrote a note by it in the css. If you make a copy of it in the section for smaller screen widths, and change the height, then you'll be able to have something mobile-friendly. ^^

Kyttias you're amazing! Thanks so much! <3 I'll definitely be using this!

Honestly, I wonder if the MAS could do with a more collaborative effort...I know HallofFamer loves doing what he does with Mysidia, and I know at least a couple others are working on it (or have in the past), but I do wonder what could happen if it was hosted on something like GitHub or something. It would also be pretty easy for people to modify code and then have pull requests for HoF to check through and such.

Back on topic, you are pretty epic with designs, tahbikat! I hope mine can look half as nice as yours! I've just got a lot of overhead at the moment kuz I tend to go a little too big for what I want/really need X3

Thanks a lot Zyraph! ^^ That means a lot!
And as long as you have the dedication and inspiration, I'm sure your site will be amazing! (:

Help
 

I could help code and add some items and pets. I also can help update your site often.

Hey Zwebble, thanks for the offer. c:

What coding languages do you know?

I'll be posting a staff recruitment thread once our official site is established, so if you're still interested by then you could visit that thread. (:

Here are the potions that change your adoptable to a rare albino! c:

http://i.imgur.com/U5C5geE.png

In order: Weak Albino Potion (2/100 success chance, shop or item drop only), Normal Albino Potion (10/100 success chance, shop only), and Strong Albino Potion (100/100 success chance, donation only)

Oh these potions look nice, such wonderful piece of work. I am sure you are one of the best item artists I've ever seen, maybe the best. XD

Oh wow really? Thanks so much, that really means a lot! <3 I don't even think I'm all that good, but I think most artists feel that way about their art, haha. :P

I'm actually in the process of making a bunch of item art for new users who want an adoptable site, but may not be able to create art for it. c: I also plan on creating two or three creatures that they can easily recolor to make different varieties.

I'll be posting it in the art board once it's all finished. (:

New Sky Whale species that will be available on Mysgardia.

http://i.imgur.com/pN5eRSZ.png
Normal

http://i.imgur.com/bejQ91f.png
Albino (may edit)

Also if anyone has critique on my pixels it'd be much appreciated. It really helps me to get another person's view on them.

Info

Sky Whales are enormous creatures that are able to fly thanks to their magic, much like Flying Pigs. Eons of living in the skies has caused them to evolve beaks for catching prey. They mostly feed on huge colonies of micro organisms that also live in the sky, but they are known to snatch up birds and smaller flying creatures that get too close to their beaks. They've also developed a small fine layer of downy feathers between their beaks and eyes, which is used solely for show.

Sky whales usually range from grey to dark blue, with rarely an albino being born. These creatures live high up in the skies, only venturing down to grab a drink of water from a lake. If their sky food is scarce, they will move to the oceans to feed for a while. When a Sky Whale is nearing death, it will find a secluded place on land to peacefully pass away. Its pod will stand guard nearby, even after their family member has passed on.

Sky Whales are hardly ever alone. They travel in family and friend pods, and can be heard vocalizing to each other from miles away. During mating season, all whales seek out the Sky Isles to breed and lay their eggs. Young whales are defenseless when they hatch, and they must stay on the Sky Isles for a few months until they are strong enough to handle powerful air currents and weather conditions.

They are very intelligent and peaceful creatures, and will defend their eggs and young as best they can. Unfortunately they are very slow moving as well, so it is easy to steal an egg or hatchling away quickly without the parents noticing.

Oh nice sprite, I like the concept of sky whales. ^^ It may be a bit weird for whales to fly though, but in a virtual world that everyone can learn magic its actually reasonable.

Haha yea, I figured they may as well use magic to get them up there. :P Evolution also exists in this world, so they'd start to evolve after a while which gives them their current features. (:

Okay, crit...your tail is absolutely beautiful, and so are the transitions in it, but the underside of the beak/mouth is a bit jagged. I can tell there are stray pixels in there and I think you should have used grey-toned pixels to create a softer edge. The back flipper doesn't have complex shading/texture at all and looks unfinished because of this. I love your eye and the texture of the beak. Your shading is really good though you might want to put some on the upper part of some of the flippers.

ETA: Just noticed, where are the opposites of the other flippers? You might be able to get away with not having them but a sliver behind the others could be nice.

I think you're getting better with your pixel art! Noticeable better from your first few. I like the new light outlining, but now it seems that the outline on your first few are a little dark in comparison. (And lighter outlines are improvement, I feel.)

@squiggler,

Thanks for the critique! The jagged parts are supposed to be very fine "fur/feathers" they've grown. It does look a bit harsh though so I'll take your suggestion and try to soften the edges with a greyish color. Also I didn't draw the other flippers because I figured the second one would be covered by the first flipper closest to viewer, and the third one is so small it wouldn't be seen. I MAY be able to fit the second one in there, just a little, so I'll see how it looks! (:

And I agree with the shading on the 2nd main flipper. It's horrible. I definitely plan on fixing it up before releasing them on my site. :P

@Kyttias,

Thanks! <3 I'll do lighter outlines for all the others and see if it looks alright! (: I'm glad you guys commented because I can fix this stuff up before they're released! c:

Hmm...you could also make the feathers 'bigger.' Just a little bit. Like this:

http://i59.tinypic.com/2b86x0.png

I redid the feathers to look, well, more like feathers. :P I've also made the babies so I'll post them with the adults. The babies came out horribly but I'm just going to call them done I guess. Also the babies don't have feathers because they're supposed to grow in once they reach maturity.

http://i.imgur.com/8Z8Cy5A.png

http://i.imgur.com/giNoZ6k.png

This is the finished Relic Town overhead map! c: Actually, it's about 90% finished. I plan on adding one or two important buildings and some more decor. This will be used on the site. The arrows you see lead to more overhead views of the wilderness, black market, etc.

What I'm trying to accomplish is a very basic exploration system using just image maps and pages that members click through. I can also add various "quests" and hidden rewards throughout the map that members can do. Hopefully one day it will evolve more into a game using arrow keys and an avatar the user can control. c:

You're ambitious! I like that!

Haha, thanks! It's been one of my "dreams" for a while to have my own online game, MMORPG type. It's one of the reasons I started learning web design. c: the only problem is I think I'm more of a designer than a developer. Not sure yet. I'm highly considering taking classes in web development so I can realize my dream but I'm scared it will be a waste if I come to dislike it.

I say go for it! At the very least, you can ask your local college if they have free sit-in classes. (You don't get credit and you don't get your stuff graded and you don't get access to their computers probably, but you get to attend all the lectures and watch everyone. If you download the programs they're using, you'll be able to try the techniques they explain.)

Interesting, so you want your site to turn into some kind of MMORPG. Its definitely doable, though at this stage it can be somewhat tricky. I do remember there are game makers like RPG Maker VX that allows you to create your own RPG Games.

You expressed your interest in a browser MMO and this is something I've been wanting to do for years. It's a step up from just a standard RPG. A lot of people assume 'oh I'll just make an RPG and make it an MMO later' but once you realize the internal organs that game has to have to make it compatible for multiplayer, your whole game engine may need to be reconfigured from square one to work with it. And unless you wrote the engine yourself, you'll be hard pressed as to figure out how to even begin. It's why I don't recommend using a program to do it for you - you really have to pick a language and learn it.

For a browser MMO, you have few options ((and in any instance where you have to host the server yourself, it's worth mentioning that there are (kind of) expensive alternatives to this that charge per connection or monthly, such as Photon, SmartFox, Player.IO (apparently bought out by Yahoo), Red5, etc.)):

• A Flash game (won't work in the browsers of most handheld devices) that connects to PHP and MySQL and/or through a socket server which you'll have to host yourself (here's hoping your computer can port forward its way out of a paperbag, my ISP has mine locked down so I can't). I quickly gave up at this point because, while I knew plenty about the language Flash was written in (ActionScript), I'd have to learn other components just to handle it.
  
• Java. I don't even know where to start with Java, except that if you remember Runescape, that was done with Java. It requires users have the Java plugin installed and up to date and you still need to host the server yourself. And you have to know Java. Most colleges still teach Java. However, it's seen just as much of a decline as Flash for online use: Because it requires the browser to run off a plugin, those on mobile devices are shit outta luck unless you are building a native app to iOS or Android or whatever the device is (which means it won't be in a browser, and won't cross-platform). It's likely the game will manage its data in MySQL (though alternatives exist, including JSON).
  
• Javascript: Two options, either by manipulating a page's HTML elements (the DOM) or with HTML5 Canvas (which has gaining support across all devices). There are dozens existing code libraries (both open source and commercial) that can help you create games in Javascript/jQuery (though none specifically meant for MMOs, they can help you handle basic necessary functionality like movement, tiling, stage loading and sprite animations), such as melonJS, Impact, Crafty, Quintus, Jaws, gameQuery, and many more. You have multiple server options:
  • Using PHP to connect to MySQL (or JSON), just like Flash. You don't have to host a server, as it can all be done through your web host (and believe me, a free host will drop you so fast). A lot of Ajax will have to be used as duct tape to keep data in sync. You'll probably need dedicated hosting versus shared hosting, just so you have access to plenty of your web host's server's RAM to handle all the i/o connections.
    
  • Node.JS uses server-side Javascript and, you guessed it, you get to host the server yourself. Luckily, it's well documented! And it's just Javascript front to back, so it's all the same language, and you won't have to learn to configure multiple things! Data can be stored in a MySQL database or you can use JSON, which is more of a hierarchy tree than MySQL's tabular arrays. (Say hello to open source BrowserQuest!)
    
  • Firebase. This one is new and I believe it will be a paradigm shift for web development of all types. It stores data in realtime in a hierarchy tree like JSON (and it can also export to JSON). The documentation is there and it's still just Javascript - their very motto is that you shouldn't have to touch serverside code. It's meant for real time, meant for handling i/o connections, and it's handling the server hosting - already making it more efficient than handling PHP via Ajax. For developers, up to 50 visitors can be connecting to the database at the same time, and from there on, each connection will cost around twenty-five cents (which any paid content your game offers should handle the funds for).
• Unity is worth a shout out - there will definitely be a huge wave of gaming in the future done through Unity, but like Java, it requires a plugin and, on the downside, games won't be accessible on mobile devices. On the plus side? Games done in Unity can be written in JavaScript, C# or Boo and even render in real 3D (and ordinary 2D but that's... definitely not the focus). There are already 3D browser MMOs in development using Unity! It's free to develop in, but it's very new and community documentation may not exist en mass yet. And you still have the same old problem of deciding how you're going to host your server and store your data.

Outside the browser, there are still more options that you can go for to make an MMO, of course, in a plethora of languages with many, many helper engines, libraries, frameworks and programs to help along the way. The key is finding something well documented with an enthusiastic community with lots of open source projects to observe before you dedicate yourself to learning whatever programming language you'll be working with, that way you won't come off disappointed.

I also urge you to learn all that you can via online resources before you spend money on classes. MIT offers courses online for free (which don't count towards college credits, of course, but it provides you with all the video lectures, materials, and coursework), and here is an article that lists their courses for Game Studies. There are many, many helpful websites online to help you learn literally any programming language. It's a lot more fun and a lot less stressful to learn at your own pace (and much less expensive). I super recommend Code Academy.

Because Javascript can be used in both traditional web development (the jQuery framework specifically makes manipulating page elements a breeze for a great interactive user experience) and game development, I definitely think that's worth picking up. (In fact I even recommend starting with jQuery and then backtracking to full Javascript.) Here's jQuery at Code Academy, a 3 hour course. And then Javascript, the full 10 hour course. (You can even learn the basics of Firebase at Code Academy if you fall in love with their teaching method.)

Right now I'm working with Javascript and Firebase. I've got movement, coordinate tracking, and a list of online users. My next step is to render other players at their respective coordinates, and it's actually what I'm doing tonight/this week (never know how long something's gonna take, with distractions).

Well said! I recommend checking out online courses like Kyttias said before spending absurd amounts of money in something you dont know for sure if you will like it. But don't look away from learning in a classroom and have the help of teachers and other students to understand the "why".

I also recommend Dart, it compiles to javascript, looks a lot like java and c++ and has its own editor that looks a lot like Eclipse ide. I watched Notch program this game in 48 hours on Dart during one of the ludum dares (and he quit for a few hours and started and kinda-finished another game mid-way).