Sigmag
-
Posts
19 -
Joined
-
Last visited
-
Days Won
1
Everything posted by Sigmag
-
Happy to hear it! Anything you found hard to use, or think would work better? It has room for improvement.
-
Thanks for giving it a shot! Hmmm, were you using a touchpad or a mouse? I think we found that another game of ours wasn't fully supported with the touchpad, so I'm wondering if that's the case here too.
-
From v2.0 to v2.1 I made a bunch of image changes: Removed: hud_3by2_phud_16by9_phud_4by3_p Filename Changed: hud_3by2_ls --> hud_3by2hud_16by9_ls --> hud_16by9hud_4by3_ls --> hud_4by3 So all those sheets it's trying to load are from v2.0, you have a cached version of the code but not the images I think. Give SHIFT + F5 or CTRL + F5 a shot to ignore the cache and it shouldn't error out. Let me know if that does the trick!
-
Alrighty nixeldev, made that change. Decided while I was at it, I would completely restructure the code, so it should use like 10x less resources while it's at it - I wrote it really inefficient before for some reason so I was able to cut the code and memory commit by like 50%. No more graphic glitches, no more weird jumpy behavior! I didn't get around to making the info look bigger in portrait mode, but I'll get around to that eventually when I get some free time. And I don't have a github, not sure how to use it. I don't code natively in html5 - I work through Construct 2 - so I don't know that my source code would be of any use to anyone. I'm willing to set one up, just not sure how to utilize it? In any case, here's HTML5 ResUtil v2.1 just hit shift+f5 to clear the cache of the old one and you should see the new changes.
-
Description A casual, family friendly HTML5 game developed for mobile web. Match the food to the cat before their patience runs out and they leave! Click here or on the banner above to play the game or click here to navigate to our landing page for the game on our site to see more. We just put the finishing touches on yesterday, so let us know what you think and feel free to leave constructive criticism if you think there is room for improvement! Screenshots
-
Thanks for reading through! The practices in this post are more fruitful for those developers on mobile vs PC where RAM is much scarcer and performance is much more affected. I'm still solidifying my understanding of everything as well, so I'm glad you mentioned the 'paging' done by browsers! We had worked with application wrappers that don't use the paging system too, so it's like you said - it always depends on your particular scenario/environment. Especially on mobile where the page sizes would be smaller, which would make it easier to create extra pages with odd image dimensions. As for if you should try to make all of your textures power of two... I think yes, but not for only the sake of RAM. It's like you said, it will not matter in all situations, but it will help to account for all situations, and a huge reason I stick to the power of two image size in textures is because it helps in the manipulation of the image file as well. If I wanted to resize a 257x257 to 50% (turn 4px into 1), it would need to resize to 128.5x128.5 which doesnt exist, so it would round - causing pixel information to shift and blur on resample. By keeping in line with power of two image sizes, you can maintain image integrity, when you reisize a 256x256 image to 128x128 it will turn 4 pixels into 1, allowing each pixel to be accounted for in the image, so there is no blurred information. Here's an image showing this concept. The original (256x256) is on the left, and the 2 images resized from it to the right. Even this will not affect the outcome in many images, but I think it is good practice where it can be used all the same to avoid any potential complications, both on the RAM side and on the image quality side.
-
What I aim to do with this blog post is set people on the right path from the get go with how image size in RAM works. I also want to provide others with the system I used to audit my image RAM and process I used to cut out inefficiencies. This should help you to get a good visual overview of which of your images are wasting the most RAM and where you can cut the fat. You can plug in the image asset list from your exported project and the sheet will give you some nice color coded information that isn't too hard on the eyes. Just click the banner above or, you can click this link too: http://pangolingames.com/how-to-audit-image-ram/ There is a RAM vs Storage overview before it gets to the utility itself, that should hopefully help explain how image download size and image size in RAM are not the same thing. In any case, I hope you find it an enjoyable and enlightening read! If you find anything that's incorrect, let me know!
-
Glad you found it useful! I have plans to do a write up for the dynamic scaling technique sometime within the next month or so, to give a detailed look at how this works so others can implement it more easily in their programs.
-
Good point! I just edited the post to add in the download for the original file. There may be a couple of extra details in the file that aren't mentioned in the tutorial, but all the major features are. Let me know how it went after you've gone through it! Any feedback will help with making future tutorials more concise.
-
I'm a Construct 2 user myself, and actually built a utility in construct 2 using 'scale outer' along with some extra logic to dynamically scale and fill the screen regardless of what size it might be as well as give other information and help with visualizing this kind of thing. Click the banner to launch it and test it out for yourself. You can see this exact same logic in place in our upcoming title, Dragonfly Zero. Here's a quick demo of the main menu, you can stretch it any which way on PC, but if you are on mobile and set your device to landscape, it pauses the game and tells you to go back to portrait before continuing. (May not work on all mobile devices, I think I broke something while stripping down the code) There is filler on ALL sides of the core gameplay screen, so be sure to stretch the window tall in addition to stretching it wide. Construct 2 is really versatile. Here's a basic .capx with the base logic I used for the resolution utility. I stripped out all the other stuff so that you know what to focus on, it's fairly lightweight, but may require a bit of reverse engineering. But it should give you a base to work off of.
-
Not necessarily an update to the utility itself, but I stripped our upcoming game, Dragonfly Zero, down for a tech demo showing how by augmenting the logic used in the utility, I was able to make the game fit any screen. Figured this might help people see what is possible, I think this is one of the best approaches to the resolution issue. You can stretch the window to any size you want, any width, any height, and the game will display correctly - utilizing the most space it can. Top post is updated to show this as well.
-
Hey guys! I've been working on animations for our upcoming game, Dragonfly Zero, and wanted to share the process including the technical facets I used to create the weapon firing animations. The write-up ended up being fairly long, but I added in pictures and humor where I could to make it more accessible. This post should be useful for artists and non-artists alike! You can either click the banner at the top, or click this URL: How To: Animate and Light Weapons Let me know what you guys think! A few of the animations:
-
Glad you found it useful, the other features shouldn't be too hard to add in. I already started on the dynamic window resize feature, because I think that's more intuitive than the original which changes orientation mode when the game screen is sized past 1:1 in either direction. Ran into a few hiccups though, so will revisit. I need to get the numbers more precise as well, sometimes 1.77:1 (16:9) displays as 1.78:1 and some counts are off by 1 now and again, but it should be accurate enough for most uses!
-
Alright turnA, check out the new version (landscape and portrait) and tell me if this is what you had in mind. HTML5 ResUtil 2.0 I've also updated the main post to reflect the changes.
-
Ok, I will start revising the code!
-
Thanks! I have read this a few times, but I'm not sure I understand completely. Are you saying you would like for a 4th box to appear based on input of resolution (aspect ratio would be a byproduct of that input) that will show visual relation to those aspect ratio boxes, as well as include some additional text info (bleed px/safe area px for 4:3, 16:9, 3:2)? If you could do a simple mock up of the idea in paint or something it could clarify a good deal - I don't think it will be too hard to modify the utility to suit your liking.
-
Glad you found it useful! There is also a trick in Chrome that I learned about recently that may help as well. To emulate different device screens through chrome, you can hit ( CTRL + SHIFT + i ), then hit ESC, then click the "emulation" tab, and it'll give you a list of devices as well as viewport resolutions and some other info.
-
Hi all, I'm new to these forums, but really want to share what I've made with everyone. Not for my own sake but to help all those other game developers out there that have trouble deciding what resolutions/aspect ratios to target. I built this utility to help me visualize how common aspect ratios display on any screen size when stretched to fill the screen as much as possible. All you have to do is deploy the URL on any device to see how a game of size 4:3, 3:2, or 16:9 will display. You can even just use your browser and stretch the window to the target size so you can do all your planning from the PC. however I recommend loading it up on the device as there are software bars and URL bars to consider! In any case, please take a look - I feel we all have something to gain from having a visual aid when planning our target resolutions. Just click the banner below! You can also see an augmented version of this scaling logic in action in our upcoming title, Dragonfly Zero. Click the banner below and stretch the window to whatever size you want. The game will scale and implement extra filler as is appropriate for the aspect ratio - regardless of how tall or wide you make it! --------------------------------- UPDATE (5/7/14): Made changes requested by turnA, designated v2.0 This version includes both portrait and landscape in the same utility for ease of testing New screenshots as well Notes: There may be minor discrepancies of 1-2px either visually, or represented in the information panel. Each box includes it’s border as a representation of it’s aspect ratio. This means the game screen box will overlap the borders when matching aspect ratios. The utility will automatically switch between portrait and landscape orientations (if height exceeds width in landscape, or width exceeds height in portrait). The orientation label also works as a button. Portrait mode is somewhat restricted on landscape displays (text size reduction), works best on flipped monitors and portrait displays. SCREENSHOTS Landscape - iPhone 5S, safari (iOS) Portrait - iPhone 5S, Safari (iOS) Landscape - PC, Google Chrome (windows)
-
What is the best resolution for a HTML5 game
Sigmag replied to NokFrt's topic in Coding and Game Design
I feel I have something of value to offer in regards to this. I'm still very new at indie development, but have been making strides on the graphics side of things, especially regarding dynamic scaling. I built a resolution utility that shows how games with common aspect ratios (4:3, 3:2, 16:9) will display on any given resolution, it also shows how they can scale to match any screen size! I really want to get it out in the open and have others see it because I feel the enigma of game resolution and scaling comes up all the time and having a visual aid proved critical when planning my UI. It gives approximate information about how much pixel bleed you will see for each aspect ratio at any given resolution, as well as just general scaling info, etc. In any case, just take a look at the following URL. You can stretch the window and it will update so that you can set your browser window to whatever your target resolution is easily and note how those aspect ratios appear. HTML5 ResUtil 2.0
