A Book About Hype (3.5+Pro) 📘

30

I tried something similar. It's called ResolutionTab.

I'm thinking the problem isn't the software. It's the hardware. I think the 4:3 monitor is not wide enough for HiDPI. 1280 Ă· 2 = 640. I think that's below the requirements for OS X. This is odd though, as 960 x 540 is also below 800 x 600.

What?! No Mac Pro?! :smile:

When a computer costs over $2500, I feel like it should come with wheels – so I can drive it.

I'm trying to hold out for the Skylake chips. Once they're out, then it's choosing between the Macbook Air, Macbook Pro, iMac, Mac Mini or Mac Pro... but there's still the possibility I'll keep using my Mac Mini. Juggling monitor cables is annoying, but it is getting the job done.

31

The beauty is the notion of scaled modes, where you may not have the physical pixels, but OS X can represent the monitor virtually at any size and then at the last minute perform a scale so it will fit on your actual display.

2 Likes
32

Progress Update - Thursday, September 24, 2015

I'm not feeling too good. I think I have a cold. Heh, I think it's too much sitting and the change of weather. I'm not quite hitting my writing goals. Although, the interactive examples are turning out a bit better than expected.

I'm working hard to keep the book size down. The same applies to the interactive examples. One of the ways to achieve this is to not use images. Instead, I've been using Hype elements to create artwork.

Currently, I'm working on the "Hype Pro" chapter, the "Symbols" section. I like what I created to explain how Symbols work...

It's two levels of symbols. One is the "electron", which is reused nine times, and the other is the "atom", which is used three times. In the interactive example, the atoms use physics. They can be dragged and flung around. There's no real reason for that. It's just fun to bounce them around.

The GIF (pronounced like the peanut butter) shown above was created with Hype.

I think Apple might be preventing that from happening in certain situations. My 4:3 1280x1024 monitor seems to be one of those situations.

1 Like
33

Progress Update - Saturday, September 26, 2015

Hey @Daniel @jonathan and @stephen,

It looks like there should be an update to your documentation...

Because of this each scene can have only one instance of each persistent symbol.

I tested that today and it doesn't seem right. I created a Hype project with two Persistent Symbols on the scene. It worked. Did Hype suddenly get more powerful?

I'm not trying to duplicate the existing Hype documentation. The problem was at the end of the "Persistent Symbols" section. I was like... uh... that's it? So, I checked the documentation to see if I missed anything.

I thought this was funny... Tumult Hype Documentation ...We both wrote about the accidental deletion of symbols. Perhaps that says the "Remove when no longer referenced" option shouldn't be enabled by default. That would ruin the usefulness of the feature though. So, perhaps it should be a preference setting. It should be off by default, but brave developers could set it to on by default.

Also, I noticed something with Scene Transitions. If the same transition is used again, it can be less smooth after the first try. The "Swap" transition was causing my persistent menu to flicker. So, I switched it to "Right to Left" transitions. The first time the transition is run, it's OK. Subsequent transitions have a gap between the scenes.

I should be wrapping up the symbols sections today. Wow, it was like Inception... a dream, within a dream, within a dream. I thought I knew how symbols worked. I thought I knew Hype. Working on this book has really pushed my development skills to another level.

4 Likes
34

Take your time with it
 Although it’s a simple concept but when working with May instances and lost of grouping and netting it gets difficult to get scaling right as well as behavior might not be what you expected
 I’ve been experimenting a lot with them
 Got super lost and greater some kind of ghost particle fx where the shadow of the elements move independently of the symbols it’s self
 And then when physics and consoled by device tilt on
 That’s where things get really freaky

35

I was wondering what your plan is for known bugs. Like symbols not retaining ids on export - import

1 Like
36

I didn't know about that. HA HA! I did mention that symbols can be imported and exported, but I wasn't aware of issues with IDs being lost. (Hey @Daniel @jonathan and @stephen, this seems to be a problem with templates too.)

When I see an issue, I report it. Then, if there isn't a solution, I try to write around the problem. My thinking is that Tumult is good about fixing issues. The idea is to try to give the book at least a one-year shelf life. If I write about issues, and then those issues get fixed, then the book becomes confusing or obsolete.

One of the reasons the book has been moving slower than I'd like is that I've been sending in a lot of feedback to Tumult. I think this whole process is making me a better developer – but I also think it's making Hype better software too.

Your question is related to something that I'm struggling with right now. I already covered Physics as an Inspector Pane, That part was easy. But now, I'm working on the Hype Pro chapter. I'm trying to write about Physics as a professional feature, even though I know it's not really a professional feature right now. It's a new feature.

So obviously, I'm not trying to bash Tumult or Hype. I like the company and I like the software. Also, I don't know where the software will be nine months from now. Simple additions to Hype could make Physics awesome. Additionally, I'm trying to create useful information for readers too. It's a delicate balance.

I'm still not sure how I'll finish the section, but I figure it's a good idea to go into more detail with Physics. I've been trying to focus on explaining the software. Here's a screenshot...

Screen Shot 2015-09-28 at 7.22.41 AM.png2048×1100 223 KB

Instead of writing about what Physics can or can't do, I decided to go into more detail about what it can do. What is Density? What does it do? Hopefully, that's what the interactive example will show. Each of those elliptical elements has a density value. That value is displayed on the element itself. They're draggable, so they can be dropped into the tank. Elements with higher value can fall further into the tank. 1 and 5 float on top. 10 might fall a little lower. 25 ends up near the bottom. 50 and 88 can push all the way through.

It's not the prettiest of examples, but I think it's fun to play with.

This example does a few things...

  • It shows the power of the physics engine. There is potential here.
  • It further explains the density value. It can go higher than 10.
  • It's an example of real life physics. Topics like this make the book more friendly for schools.

Grumbling about the lack of Physics features doesn't really help anyone. That's not what the book is about. That's what this thread is for. :smile:

2 Likes
37

Im super excited to see this book come to reality. I was just curious to if you have already composed an index detailing all the subject covered and if at this point you were willing to share it.

1 Like
38

Its been added to their bug list. I am not sure who has access to the whole list or where you would find it. But it may be worth reading through the known Issues threads. if you get a chance. Or see if Tumult can let you peek at a list ?

I think thats a good approach.

1 Like
39

There's a way to make new custom resolutions in SwitchResX that overrides the system default.

The keyword here is instance; you can have multiple persistent symbols on a scene, but you can't have two instances of the same persistent symbol.

We originally had the opposite during development. We found it was very confusing, especially when you'd make a new scene and persistent symbols that were no where else would show up! I don't think there's a right answer for this, it really goes both ways. That does indicate a preference might be in order, but we like to keep preferences to a minimum for simplicity reasons, teaching reasons, and so one person's environment is similar to another's.

Can you send a zip of a .hype document that reproduces this?

Try inserting a symbol into itself :wink:.

Absolutely! We appreciate all the great feedback; it is rare users dive as deeply as you have and so it is uncovering many items we can (and have in some cases) improved in both functionality and workflow.

You really don't want to look inside the sausage factory :wink:. There are 825 items we have listed as open bugs (this doesn't count crashes!) and 546 open features. Our case numbers go from #1 to #9932.

3 Likes
40

Back when I was researching this problem, I was wondering if SwitchResX might be better than ResolutionTab. I went with the application that was on the Mac App Store. That's one of the reasons why I went with Hype, as opposed to a competitor.

I'm OK with my current setup. It's getting the job done.

It looks like the book needs updating. HA HA.

Screen Shot 2015-09-28 at 8.41.58 PM.png800×292 56.4 KB

I think that makes sense. It also means I don't have to update that section of the book. Basically, I warned about accidental deletion.

Heh, I knew this question was on the way. The problem is that the issue was discovered while making an interactive example for the book. That's still secret. So, I created a new project for testing...

rgb.hypetemplate.zip (42.4 KB)

...the first transition is OK. A white bar is visible in subsequent transitions. It's basically the background bleeding through.

Heh, not since the little robot in Quark XPress have I seen a design app with such an entertaining Easter Egg. HA!

It could be worse. It could be Drupal... https://drupalreleasedate.com ...over 6,000 issues.

42

yeah! :slight_smile: and deleting an element the third time with all command -keys pressed the robots big brother came along ... great !

so is there a nice animated easteregg within hypeÂż

1 Like
43

It's just a funny dialogue box.

I wasn't expecting that. I was wondering what would happen? Would it be like a video camera recording a display of its own video? (Another comparison, a mirror pointed at another mirror.) How would it work? It didn't even occur to me to put a symbol in a symbol. So as I was about to try it, I was imagining some big scenarios.

Screen Shot 2015-09-28 at 8.44.16 PM.png800×252 49.9 KB

Heh, and then I saw that. It makes sense. Symbols shouldn't be in symbols. The symbol would displayed an infinite amount of times.

This book doesn't have an index. There is a glossary option in iBooks Author, but I'm not planning to use that for this book. Instead, I have Chapters and Sections. If you wanted to learn about Symbols, there's a "Symbols" section. If you wanted to learn about "Persistent Symbols" there is a section for that too. If you wanted to know about a particular part of the Inspector panel, there is a section for each tab.

The idea is that I'm starting from the beginning, thoroughly explaining the software, and then I move into more advanced and real world topics.

I'm not ready to publish the list yet, as it's still changing.

2 Likes
44

Progress Update - September 29, 2015

Wow, September is almost over. I better get moving. I’m going right back to work after this post. I was feeling pretty good about the example I just made, so I thought you might like to see a screenshot.

Screen Shot 2015-09-29 at 5.26.40 PM.png1136×640 41.6 KB

I mentioned the “Density” interactive example before. The screenshot is from the “Friction” example. It looks simple, but there are subtle things going on. The element rolls from left to right. Once the element reaches the right side, the scene automatically resets. The Friction value can be changed with the slider – while the scene is running. The controls at the bottom left are in a “Persistent Symbol”, so the Friction setting is consistent. You can load a circle or a square.

I think this is a great learning resource, as you can actually see how the Physics settings work.

I also created a nice interactive example for Bounce / Drag. I have about a dozen of these interactive examples in the book so far. I’m planning to make more.

1 Like
45

Please take your take with the scaling section as well as best practices for texting symbols and using multiple time lines
 It can be so easy to lost. I love the screen shot above it looks like a great example to illustrate how the physics interacts.

1 Like
46

Progress Update - Wednesday, September 30, 2015

I’m working on the JavaScript chapter now. A major issue arose. I wasn’t sure how to settle a bitter debate – Should semicolons always be used or is ASI (Automatic Semicolon Insertion) good enough?

I noticed that Tumult uses semicolons in their examples. They’re aggressive about reducing the size of their JavaScript code, so there’s probably a good reason why they use it.

Previously, I was using semicolons all the time. But lately, there seems to be a trend in excluding them. (Swift doesn’t require semicolons either.) I was shocked to see that I could remove all of the semicolons from one of my Hype projects and nothing bad happened. I tested another project. It was also OK without semicolons. I tested a third, uploaded it to the server, to see if there would be minification issue. Nope, just the usual JavaScript issues I didn’t get around to fixing yet. HA!

Learning about ASI has certainly changed my JavaScript writing style. I’m seriously thinking about dropping semicolons when they’re not necessary.

Personally, I’ve always hated them. It seemed superfluous. Yet, I don’t think I’m going to to settle the debate. A lot of developers are using semicolons because that’s what they’ve always done or because that’s what they’re used to from other programming languages. I doubt I’m going to change their minds.

However, people that are new to JavaScript won’t have an opinion on this matter. Every line of code that future developers write could be partially influenced by me. This feels like a big responsibility.

Update: I might change my mind on this one, but I’m starting to think semicolons should be used. It’s not just fear, uncertainty and doubt. There are legitimate concerns. I don’t think they’re major concerns, but it’s enough for me to feel bad about excluding them.

1 Like
47

I hope you’re feeling energized about the book-Here’s what I’m struggling with -I’m working on a fixed layout iBook with pages that are HTML5 widget scenes built in Hype Pro. Several elements will be physics powered, which is great for mobile. But iBooks is also available for Macintosh. How do I make it just as entertaining?

48

I'm quite tired actually. This book is moving along at a much slower pace than my last two books. I like to think it's because I'm working harder at it. Perhaps it's because the subject matter is more difficult.

I'm not sure a fixed width iBook is a good idea. While an iOS device running the latest version of iBooks can open a .ibooks file, it's not the greatest of viewing experience. I'm using the ePub template for "A Book About Hype".

The Interactive Stencyl Textbook uses a fixed-width layout. Wow, that was a bad decision. At first, it would only run on Mac and iPad. Lots of people were grumpy about that. It's disappointing, because I like the look of a fixed layout.

Isn't it the reverse? Wouldn't physics powered Hype widgets be more powerful on desktop? I'm using Hype Physics in my book. It seems to be OK. The problem is when two Hype widgets are too close to each other. To prevent crashing, I try to limit it to one per section. It's one of the reason why I have so many sections.

I set the widgets to run on the page. That way, they scale to match the size of the book/display. It's disappointing that fullscreen mode doesn't fill the screen, but that issue appears to be on Apple's side.

49

Thanks. From what I can tell it isn't the scene itself that is off, but the elements in the scene start to slide a little. If you set a background color to the scene you can see this. Further, it only happens in Safari; Chrome and Firefox are fine. I believe this is a Safari bug. Unchecking "Use WebKit graphics acceleration" from the Document Inspector also fixes this.

Our minifier (google closure compiler) will automatically remove or add semicolons as it sees necessary (it prefers not to use newlines so I think keeps a lot around, but they aren't really "ours"). I personally like/use them as it does protect against some classes of bugs but also more strongly indicates intent... we're also C/Objective-C developers so it is a bit second nature to us to add them. I'd also say most developers do use semicolons, so there's a better chance of copy/pasted code matching their style. JSLint and other cleanup tools I believe enforce using semicolons.

2 Likes
50

Progress Update - Tuesday, October 6, 2015

I had a pretty productive day
 well
 evening. Last night, I was writing up a storm. I’m past the tedious parts of the book. Now I can focus on examples. First up is an RGB color selector. This part is so much more fun. I was doing great until


Whoa
 whoa
 whoa
 this code is embarrassing. This isn’t optimized.

Almost 24 hours later, I figured out a better way to do it. I decided to add that into the book. It happens a lot. A project might look good at first, but then a problem is discovered. Then it’s the delicate process of deciding how to fix the issue. Maybe there’s a cross-browser issue, maybe the code runs slowly, maybe the code is insecure – a lot can go wrong. I think that’s a good message to communicate. A lot of new developers might think it’s their fault. Nope, just another day at the office.

I don’t want to give you bad code. Even if an example works, it might not be good enough. I don’t want to get angry letters from people that know JavaScript better than me. At least if the letter is from someone at Tumult, they’d probably be friendly letters. The team has been very nice.

OK, I’m just letting you know that I’m still alive and I’m still working.

2 Likes