Multi res / easy viewport managment, for next release (?)

[gsynuh]

ideas:

• CE will need base dimensions for your game and will store them - or by default flash stage size I guess. (finally explicit base dimensions for the game)
• CE will create viewport automatically unless asked not to - using various viewport modes we'll have (letterbox, show all, full, manual). -according to : https://github.com/alamboley/Citrus-Engine/pull/141 Will consider stopping forcing starling stage size, implying some camera rework.
• all citrus states could have camera set up by default... (with _camera quick access) but not enabled (so no updates by default.)

[mcapraro]

threw a zip file of splash screens and icons in the dropbox folder: https://www.dropbox.com/sh/q6yge43dr3mlo8g/I0iDAaDKwd

not perfect but you may find them useful

[gsynuh]

Thanks !

To me this would open up the question of whether or not we would setup a structure to have a splashscreen by default - until the first state starts... something that could be changed of course (I'm not for forcing the citrus logo on everyone even though it would make us proud to see it I think)

But I see you're assuming we're always going to run in landscape here no? (the portrait versions have their logo rotated 90° ) - I had to make a small app in portrait with CE once, this would've been weird - or is there a specific reason (didn't use the "native splash screen" much, you know that default@ ... )

[mcapraro]

You are totally right Thomas, I can also provide portrait screens.

I think mainly for demo purposes this is nice and also to have as a starting point for developers. There are actually a few more screens for iPads that I can include just to be thorough. Beyond these ios splash screens, I do have a splash screen class in my apps as most games seem to have logos they show, even multiple (developer, publisher, etc). I would be proud to add this logo somewhere if I ever get a citrus game finished ;)

Ideally we could have a "built on Citrus Engine" type thing that can be placed on splash screen and is small and efficient

[mcapraro]

Hi @gsynuh, so i am looking at your UI layout stuff and i really like it, i could totally see this becoming an essential part of my workflow!. here is some feedback:

i notice it introduces a new API that as a new Citrus user can feel confusing. in Citrus we use add() to add things to the game, in flash we use addChild, and now we have addElement.

i know this is different because we are adding images (view) instead of objects (controllers) but wondering if we could create a system that abstracted this to match how citrus abstracts the game functionality.

so we have the basic layout container, then we would have ui objects that we add() to it and those could have commands attached so we can react to button clicks on them if need be (like a pause button).

i guess i'm wanting to find a way to make this feel like a natural extension to citrus and keep developers from having to learn too many new ways of doing things.

also, i love the aligning and margin control. here is an example of something i think would be good to have in the demo that it would be cool if the layout supported: i add the player lives in the upper left, keys in the upper center, score in the upper right. it would be cool if i could add the individual elements (like the hearts) and it automagically just aligns them in a row, separated by a default margin. in fact, it would be cool if i can add all the hearts to a UI group that just positions them left to right and then have that group be upper-left aligned, like this:

the groups can have name IDs so i can access them easily and turn the sub objects on or off or change their textures, like:

hudLayout.getGroupByName("lives").getElement(4).view = Assets.assets.getTexture("empty-life");

or, since i added the group and it could return a pointer to it, like:

var playerLives:CitrusUILayoutGroup = new CitrusUILayoutGroup("lives");
playerLives.add(/*some heart object*/);
playerLives.add(/*some heart object*/);
playerLives.add(/*some heart object*/);
playerLives.add(/*some heart object*/);
hudLayout.add(playerLives, BasicUILayout.TOP_LEFT);

[gsynuh]

Hi @mcapraro ,

the naming convention in my opinion for the moment fits correctly as its absolutely not like addChild() and not at all like the state/citrusObject relationship so this makes it clear that the system is different (and also independent because it can be used outside of the CitrusEngine context as it simply is some form of basic starling dispay list extension)

that can be in discussion anyway.

What you'd like here is 2 new forms of layout types : vertical layout and horizontal layout (also padding) it would be good to have in fact.

Will be finishing the sound system and see what I can do with it cause it a good idea, I just didn't want to go too far with this, just wanted to have the basics, a user will have to dig into some starling at some point anyway

[mcapraro]

hey there @gsynuh , makes sense, i dont want to overcomplicate things :). i do think it would be good to have some sort of system that keeps us from recreating this work for every game, so whatever we can do to speed up adding things to (and changing thins in) the HUD for example, i think that would be really awesome.

[mcapraro]

hi @alamboley, i was working on making a more elaborate demo level for this multiresolution test. i had a question: is there a way to make a moving platform using Tiled? since the view and the physics platforms are separate, it doesnt look like it but i was wondering if i am missing something.

[mcapraro]

Hi again @alamboley , i made some changes to the textures - two of the tiles were the wrong size and when i fixed them texture packer re-arranged the tiles PNG. sorry about that. in the meantime i fixed it in the map.tmx (and even named all the tiles). could you re-generate the assets that are in the bin folder with these new tiles? https://www.dropbox.com/sh/q6yge43dr3mlo8g/SjnLZkMn2g/multi-resolutions

here is a little utility script i use only in development to name all the tiles in the TMX file (i just copy form the console and paste int he TMX file)

            /*[Embed(source="/../embed/tiledmap/multi-resolutions/tiles.xml", mimeType="application/octet-stream")]
            var AtlasXml:Class;
            [Embed(source="/../embed/tiledmap/multi-resolutions/tiles.png")]
            var AtlasTexture:Class;

            var texture:Texture = Texture.fromBitmap(new AtlasTexture());
            var xml:XML = XML(new AtlasXml());
            var atlas:TextureAtlas = new TextureAtlas(texture, xml);

            var textureObjects:Array = new Array();
            var textures:Vector.<Texture> = atlas.getTextures();
            var textureNames:Vector.<String> = atlas.getNames();
            for (var i:int = 0; i < textureNames.length; i++) {
                textureObjects.push({name:textureNames[i], tex:textures[i], x:atlas.getRegion(textureNames[i]).x, y:atlas.getRegion(textureNames[i]).y});
            }           

            //var sortedTextures:Array = textureObjects.sort(textureSort);
            var sortedTextures:Array = textureObjects.sortOn(["y", "x"], [Array.NUMERIC, Array.NUMERIC]);
            for (var i:int = 0; i < sortedTextures.length; i++) {
                //trace(sortedTextures[i].name + ", " + sortedTextures[i].y);       
                trace('<tile id="' + i + '"><properties><property name="name" value="' + sortedTextures[i].name + '"/></properties></tile>');

            }*/

[mcapraro]

oh, @alamboley here are some backgrounds too, not sure how you want to size these https://www.dropbox.com/sh/q6yge43dr3mlo8g/Y_S_I_CWQN/backgrounds-assets

[mcapraro]

@alamboley @gsynuh have you noticed the pixel gaps in the tilemap demo? i added a whole bunch more tiles and it is pretty apparent. any ideas on how to rectify that?

[alamboley]

Hey, you have to export the png with the extrude option!

I've no access to a computer today, so I will have a look on what you did tomorrow. It sounds great!!

Envoyé de mon iPhone

Le 3 nov. 2013 à 10:47, Michelangelo Capraro notifications@github.com a écrit :

@alamboley @gsynuh have you noticed the pixel gaps in the tilemap demo? i added a whole bunch more tiles and it is pretty apparent. any ideas on how to rectify that?

— Reply to this email directly or view it on GitHub.

[mcapraro]

thanks for the tip @alamboley, i ended up modifying the assets.tps to output all the sizes of textures and it seems to work now. i didnt have your other packing tools but this seems to be OK for now

[alamboley]

Hey @mcapraro qoeey, I"m a bit late on this... Do you still need something from my side? You're not able to see the view of an object in tiled. You will have to register it's view as object's property. It can be a path, a texture name, etc. The easiest way is to grab its instance via its name and associate a view.

Oh and nice script btw ;)

[mcapraro]

hi @alamboley, i'm good, i figured it out ;)

[gsynuh]

Hello @mcapraro and @alamboley ,

The BasicUI api is not great and could just bug if messed with too much, I don't expect it to be stable for 3.1.8 so lets consider it experimental even if released.

but https://github.com/alamboley/Citrus-Engine/commit/515321aa5a01c50d1083415d8bec7b6672dcaa1f

adds the heart life bar (which can be used for item collection as well if you want to)

see the multi resolution example ...

---

the setup is the following :

//create _ui on stage. _ui = new BasicUI(stage, new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));

//create life bar with start life 100, maximum life 100, and available states for "hearts" in a texture array. number of hearts 5 and padding between hearts 3.

_lifeBar = new BasicUIHearts(100, 100, [Assets.assets.getTexture("heart"), Assets.assets.getTexture("heart_half_full"), Assets.assets.getTexture("heart_full")], 5, 3);

_ui.add(_lifeBar, BasicUILayout.TOP_CENTER);

Couldn't manage nested layouts and so on , headache and not really a priority anyway. But that "discrete health bar" just was such a good idea that I went for it - and for any game I'd rather have this than actually have a line that varies in size. So hearts (or items or anything else) can have as many states as you wantas long as you add textures to the array -its supposed to be flexible in this way.

also _lifeBar.contentScale = 0.5; would make the content smaller.

BasicUI.defaultContentScale = 0.6; before doing anything will make all newly created elements's contents smaller. sometimes useful I guess.

_ui is NOT a display object, to put alpha or change visible, you have to use _ui.container _ui.container.alpha = 0.7;

ANyway. that's a little addition I hope you'll find ok. I think BasicUIElement can be extended for the keys or the text you have in your example @mcapraro

, this api anyway is not fully tested (I concentrated on the hearts thing yesterday night, that's all. also addElement -> add() :)

[mcapraro]

sounds awesome @gsynuh , will investigate it in the next few days

[gsynuh]

Hello!

The default value of the profile argument in setUpStarling is "auto" which will start testing for available context3D profiles.

It seems this is not working for everyone

I finally got to test on my nexus 7, there's no problem if the delay is at 100ms actually (but I didn't do a lot of consecutive tests, just 2 or 3).

I'm worried that it might just not be the best idea to be a default behavior as I thought it would.

Someone here http://forum.starling-framework.org/topic/context3d-error-with-318 just couldn't make it work apparently (test fails for each profiles)

so maybe we should, like for 3.1.7 , set the default to "baseline" so "auto" will be something you explicitly would have to ask for?

[alamboley]

Well, if at the moment we only have one issue with someone, the problem doesn't sound to be on our side. If this context helper help many people, let's keep it by default. No ?

[alamboley]

Also I suppose that this person didn't update on AIR 3.9 ;)

[mcapraro]

hey there guys, sorry to use this old thread but didnt know where else to put this. i just did a pull request of changes and additions i made in an effort to expand the multiresolution example. if you incorporate the pull request you can try this version of the multiresoltution test: https://www.dropbox.com/s/cwjxhf6s5r6qpma/MultiresolutionTest.zip

just trying to make a bigger level, really use the features of the Tiled editor, and add some UI elements with feedback for them. its far from done and there are questions to be answered but you can see where its going.

do you think i should keep going with this so people can see how they can use the Tiled editor for things like tiled backgrounds, the BasicUI stuff, and wiring up coins and scoring? i was planning on getting lives to work too and maybe add in a loading screen

[alamboley]

Awesome!! I will let gsynuh validate the PR since it changes things from his part ;)

On the choice of the best Context3D, I just read the note for the future sdk: http://forums.adobe.com/message/5878076#5878076

Stage3D Creation of Context3D with Profile Array

We've added a new interface to Stage3D.requestContext3DMatchingProfiles(profiles:Vector. ) which will create a Context3D with highest level suitable profile that is in profile array, based on the current hardware. A developer can check the newly added property 'profile' to obtain the current profile that was chosen by the Flash Runtime.

We won't have to hack it anymore, that's a great news ;)

[mcapraro]

yeah, i saw that too, that will be great @alamboley!

was just thinking, and this is for @gsynuh too: could the BasicUIHearts be abstracted a bit into BasicUILives, and could the score and the hearts and anything else be tied into the GameData class more, se we guide the user to keep that data separate?